Set max width for pages layout

Author: SeongilHeo

index.css

@@ -39,8 +39,11 @@
 }
 
 @layer components {
+    .outlet-container {
+        @apply mt-14 sm:mt-18 md:mt-21 lg:mt-26 py-10 px-5 sm:px-10 md:px-20 lg:px-40 2xl:px-80 flex-1 flex bg-body;
+    }
     .pages {
-        @apply mt-14 sm:mt-18 md:mt-21 lg:mt-26 py-10 px-5 sm:px-10 md:px-20 lg:px-40 2xl:px-80 flex-1 space-y-4 md:space-y-8 bg-body;
+        @apply max-w-7xl w-full mx-auto space-y-4 md:space-y-8 flex-1;
     }
 }
 

src/layout/Layout.jsx

@@ -6,7 +6,9 @@ const Layout = () => {
   return (
     <main className={`min-h-screen w-screen flex flex-col`} >
       <Header />
-      <Outlet />
+      <div className="outlet-container">
+        <Outlet />
+      </div>
       <Footer />
     </main>
   );