Layout Changes

components/core/Layout/Layout.tsx

@@ -24,8 +24,8 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
       />
       <Container>
         <Navbar />
-        <main className={s.main}>{children}</main>
       </Container>
+      <main className={s.main}>{children}</main>
       <Footer />
       <Sidebar show={displaySidebar} close={closeSidebar}>
         <CartSidebarView />
@@ -36,9 +36,9 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
 
 const Layout: FC<Props> = (props) => (
   <CommerceProvider locale="en-us">
-      <UIProvider>
-        <CoreLayout {...props} />
-      </UIProvider>
+    <UIProvider>
+      <CoreLayout {...props} />
+    </UIProvider>
   </CommerceProvider>
 )
 

components/ui/Sidebar/Sidebar.tsx

@@ -73,7 +73,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                   leaveTo="translate-x-full"
                 >
                   <div className="h-full w-screen max-w-md">
-                    <div className="h-full flex flex-col text-primary bg-primary shadow-xl overflow-y-auto">
+                    <div className="h-full flex flex-col text-primary bg-primary   shadow-xl overflow-y-auto">
                       {children}
                     </div>
                   </div>

pages/index.tsx

@@ -42,7 +42,7 @@ export default function Home({
         variant="secondary"
         wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
       />
-      <div className="py-12 flex flex-row w-full">
+      <div className="py-12 flex flex-row w-full px-12">
         <div className="pr-3 w-48">
           <ul className="mb-10">
             <li className="py-1 text-primary font-bold tracking-wide">