Fix spacing issues in the header and nav

Author: itsamoreh

components/molecules/Navigation/Navigation.module.css

@@ -1,6 +1,4 @@
 .navigation {
-  @apply pt-8;
-
   & > ul {
     @apply flex;
 

components/organisms/Header/Header.js

@@ -18,16 +18,14 @@ export default function Header() {
   const {menus} = useContext(MenuContext)
   return (
     <header className={styles.header}>
-      <div className="container flex items-center justify-end">
-        <div className="relative pb-16">
-          <AlgoliaSearch
-            useHistory={true}
-            usePlaceholder={true}
-            className="ml-auto"
-          />
-        </div>
+      <div className={styles.search}>
+        <AlgoliaSearch
+          useHistory={true}
+          usePlaceholder={true}
+          className="ml-auto"
+        />
       </div>
-      <div className="container px-4 lg:px-0 flex items-center justify-between">
+      <div className={styles.navigation}>
         <Logo />
         <Navigation
           menu={menus?.primary_menu}

components/organisms/Header/Header.module.css

@@ -1,5 +1,11 @@
 .header {
-  @apply sticky top-0 py-20 transition-all z-50 border-b shadow;
+  @apply sticky top-0 py-8 transition-all z-50 border-b shadow bg-gray-100;
 
-  background-color: #f7f7f7;
+  & .search {
+    @apply container mb-8;
+  }
+
+  & .navigation {
+    @apply container px-4 lg:px-0 flex items-center justify-between;
+  }
 }