fix(layout): restore mx-auto centering by scoping CSS reset to @layer base

Unlayered CSS always wins over Tailwind's @layer utilities, so the
bare * { margin: 0 } reset was overriding mx-auto everywhere. Moving
it into @layer base restores correct cascade order.

README.md

@@ -27,12 +27,10 @@ npm run deploy   # build + push out/ to master (GitHub mirror)
 
 ## How it deploys
 
-`npm run deploy` runs `predeploy` (build) then pushes the `out/` directory to `master` via `gh-pages`. That's what feeds the GitHub Pages backup at lerko96.com.
+`npm run deploy` runs `predeploy` (build) then pushes the `out/` directory to `master` via `gh-pages`. That's what feeds the GitHub Pages backup mirror.
 
 `postbuild` drops `out/.nojekyll` so GitHub Pages doesn't ignore `_next/` assets.
 
-Custom domain is in `public/CNAME` — gets copied into `out/` on build.
-
 ---
 
 ## Project layout
@@ -51,8 +49,7 @@ src/
   data/
     projects.ts         # all projects, featured + archive split
     services.ts         # homelab services with categories
-public/
+public/                 # static assets copied into out/ on build
-  CNAME                 # www.lerko96.com
 ```
 
 > Tailwind v4 is CSS-first — no `tailwind.config.ts`. All custom tokens live in `globals.css` under `@theme {}`.

src/app/globals.css

@@ -39,10 +39,12 @@ html {
   font-family: var(--font-mono);
 }
 
-* {
+@layer base {
-  box-sizing: border-box;
+  * {
-  margin: 0;
+    box-sizing: border-box;
-  padding: 0;
+    margin: 0;
+    padding: 0;
+  }
 }
 
 /* Default transitions — linear, fast */

src/app/layout.tsx

@@ -38,11 +38,16 @@ export default function RootLayout({
         className={`${sourceCodePro.variable} bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen`}
       >
         <ThemeProvider>
+          {/* Full-width sticky nav */}
           <Nav />
-          <main className="max-w-[740px] mx-auto px-6 py-14">
+
-            {children}
+          {/* Centered content column — border-l/r makes centering always visible */}
-          </main>
+          <div className="max-w-[740px] mx-auto border-l border-r border-[var(--color-border)]">
-          <Footer />
+            <main className="px-8 py-14">
+              {children}
+            </main>
+            <Footer />
+          </div>
         </ThemeProvider>
       </body>
     </html>

src/components/Footer.tsx

@@ -1,7 +1,7 @@
 export default function Footer() {
   return (
     <footer className="border-t border-[var(--color-border)] py-5 mt-8">
-      <div className="max-w-[740px] mx-auto px-6 flex items-center justify-between">
+      <div className="px-8 flex items-center justify-between">
         <span className="font-mono text-xs text-[var(--color-text-dim)]">
           &copy; {new Date().getFullYear()} Tyler Koenig
         </span>

src/components/Nav.tsx

@@ -13,7 +13,7 @@ export default function Nav() {
   const pathname = usePathname();
   return (
     <header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
-      <nav className="max-w-[740px] mx-auto px-6 h-11 flex items-center justify-between">
+      <nav className="max-w-[740px] mx-auto px-8 h-11 flex items-center justify-between">
         <Link
           href="/"
           className="font-mono text-sm font-bold text-[var(--color-text)] tracking-widest hover:text-[var(--color-text-label)]"