fix: correct padding alignment between navbar, content, and footer

The previous implementation had misaligned padding structure:
- Navbar/Footer: padding INSIDE max-width container (max-w-7xl mx-auto px-8)
- Page content: padding OUTSIDE max-width container (px-8 on outer, max-w-7xl inside)

This caused content to have double horizontal spacing and misalign with
the navbar and footer borders.

**Fix:**
Move px-8 from outer container to inner max-w-7xl container on all pages,
matching the navbar and footer pattern.

**Structure (all components now consistent):**
```
<div className="py-12">              <!-- vertical padding only -->
  <div className="max-w-7xl mx-auto px-8">  <!-- max-width + horizontal padding -->
    <!-- content -->
  </div>
</div>
```

Now navbar, main content, and footer all align perfectly at the same
left and right edges.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/page.tsx

@@ -1,7 +1,7 @@
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center px-8 py-12 md:py-24">
-      <div className="max-w-7xl w-full space-y-8 text-center">
+    <main className="flex min-h-screen flex-col items-center justify-center py-12 md:py-24">
+      <div className="max-w-7xl mx-auto px-8 w-full space-y-8 text-center">
         <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-clip-text text-transparent animate-fade-in">
           Pastel UI
         </h1>