fix layout overflow and header width alignment

Author: Mister-Raggs

src/components/Header.astro

@@ -5,7 +5,7 @@ import { SITE } from "@consts";
 ---
 
 <header>
-  <Container>
+  <div class="mx-auto max-w-5xl px-5">
     <div class="flex flex-wrap gap-y-2 justify-between">
       <Link href="/" underline={false}>
         <div class="font-semibold">
@@ -30,5 +30,5 @@ import { SITE } from "@consts";
         </Link>
       </nav>
     </div>
-  </Container>
+  </div>
 </header>

src/pages/index.astro

@@ -29,8 +29,8 @@ const work = await Promise.all(
 ---
 
 <PageLayout title={HOME.TITLE} description={HOME.DESCRIPTION}>
-  <div class="mx-auto max-w-5xl px-5">
-    <div class="grid grid-cols-1 md:grid-cols-[240px_1fr] gap-12 md:gap-16">
+  <div class="mx-auto max-w-5xl px-5 overflow-x-hidden">
+    <div class="grid grid-cols-1 md:grid-cols-[220px_1fr] gap-10 md:gap-14">
 
       <!-- LEFT COLUMN — sticky sidebar -->
       <aside class="md:sticky md:top-24 md:self-start md:h-[calc(100vh-8rem)] md:overflow-y-auto md:pb-8 space-y-8 animate">
@@ -97,7 +97,7 @@ const work = await Promise.all(
       </aside>
 
       <!-- RIGHT COLUMN — scrollable content -->
-      <main class="space-y-20 py-2">
+      <main class="min-w-0 space-y-20 py-2">
 
         <!-- About -->
         <section class="space-y-4">

src/styles/global.css

@@ -21,6 +21,7 @@ body {
   @apply flex flex-col;
   @apply bg-stone-100 dark:bg-stone-900;
   @apply text-black/50 dark:text-white/75;
+  overflow-x: hidden;
 }
 
 header {