More UI Changes

components/Navbar/Navbar.module.css

@@ -1,3 +1,7 @@
 .root {
-  @apply flex justify-between items-center px-4 py-5;
+  @apply px-4 py-5;
+}
+
+.container {
+  @apply flex justify-between items-center flex-row;
 }

components/Navbar/Navbar.tsx

@@ -1,7 +1,7 @@
 import cn from "classnames";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 import s from "./Navbar.module.css";
-import { Logo } from "ui";
+import { Logo, Container } from "ui";
 interface Props {
   className?: string;
   children?: any;
@@ -11,10 +11,12 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className);
   return (
     <div className={rootClassName}>
+      <Container className={s.container}>
         <Logo />
         <div>SEARCH BAR</div>
         <div>Menu list bar</div>
         <div>Menu Icon bar</div>
+      </Container>
     </div>
   );
 };

pages/index.tsx

@@ -9,7 +9,7 @@ export default function Home() {
         title="Free Standard Shipping on orders over $99.99"
         description="Due to COVID-19, some orders may experience processing and delivery delays."
       />
-      <Container className="py-12 bg-black">
+      <Container className="py-12">
         <Button>Click Me!</Button>
       </Container>
     </>

ui/Container/Container.module.css

@@ -1,3 +1,4 @@
 .root {
-  @apply max-w-6xl mx-auto;
+  @apply max-w-6xl mx-auto px-2;
+  display: inherit;
 }