fix: removed container class and adjusted width of layout

Author: steadyfall

src/app/(home)/layout.tsx

@@ -9,7 +9,7 @@ export default async function HomeLayout({
   return (
   <>
     <Navbar />
-    <div className="flex-grow mx-auto w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">{children}</div>
+    <div className="flex-grow w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl">{children}</div>
     <Footer />
   </>
   );

src/app/(home)/page.tsx

@@ -10,7 +10,7 @@ import { personalDetails, experiences, projects, skills } from '@/data/resume';
 
 export default function Portfolio() {
   return (
-    <main className="container py-6 z-1">
+    <main className="py-6 z-1">
       <Header {...personalDetails} />
       <About />
       <Experiences arr={experiences} />

src/components/Footer.tsx

@@ -9,7 +9,7 @@ const Footer = () => {
     )}>
       <div className={cn(
         "flex flex-col items-center justify-center sm:flex-row-reverse sm:justify-between",
-        "mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl"
+        "max-w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl"
       )}>
         <div className="flex justify-center md:justify-start space-x-4">
             <LinkWithArrow 

src/components/Navbar.tsx

@@ -1,13 +1,17 @@
 'use client'
 
+import { cn } from '@/lib/utils';
 import ThemeSwitch from './ThemeSwitch';
 
 const Navbar = () => {
     // const completion = useReadingProgress();
 
     return (
         <header className="sticky top-0 z-50 py-6 backdrop-blur-xl">
-            <nav className="flex items-center justify-between mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">
+            <nav className={cn(
+                "flex items-center justify-between",
+                "max-w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl"
+            )}>
                 <ul className="flex gap-4 sm:gap-8">
                     <li><a href="/" className="hover:underline hover:underline-offset-4">home</a></li>
                     <li><a href="/#experience" className="hover:underline hover:underline-offset-4">experience</a></li>