Completed header but struggling to center the searchbar in flexbox; will try grid instead

frontend/src/lib/components/header.svelte

@@ -1,5 +1,4 @@
 <script>
-	import Searchbar from "./searchbar.svelte";
     import Logo from "$lib/images/gif/maxwell-cat.gif";
 	import Icon from "./icon.svelte";
 
@@ -7,6 +6,7 @@
     import LanguageIcon from "$lib/images/icons/ui/language.svg";
     import DarkmodeIcon from "$lib/images/icons/ui/darkmode.svg";
 	import Spacer from "./service/spacer.svelte";
+	import Searchbar from "./searchbar.svelte";
     
 </script>
 
@@ -20,6 +20,8 @@
     <a class="header__link" href="/blog">Blog</a>
     <a class="header__link" href="/services">Services</a>
 
+
+    <Spacer type="right"/>
     <Searchbar/>
 
     <Spacer type="left"/>
@@ -54,5 +56,4 @@
 
     }
 
-
 </style>

frontend/src/lib/components/searchbar.svelte

@@ -0,0 +1,35 @@
+<script>
+    import Icon from "./icon.svelte";
+    import SearchIcon from "$lib/images/icons/ui/search.svg";
+</script>
+
+<div class="searchbar">
+    <Icon class="searchbar__icon" image={SearchIcon} size="36px"/>
+    <input class="searchbar__input" type="text" placeholder="Search stuff...">
+</div>
+
+<style>
+    .searchbar {
+
+        display: flex;
+        align-items: center;
+
+        background-color: var(--col_panel_field);
+        border-radius: 30px;
+
+        padding: 10px;
+    }
+
+    .searchbar__input {
+        border: none;
+        background-color: transparent;
+        color: var(--col_text_panel);
+
+        font-size: 18px;
+    }
+
+    .searchbar__input:focus {
+        outline: none;
+    }
+
+</style>