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/playground/page.tsx

@@ -81,8 +81,8 @@ function PlaygroundContent() {
   ]);
 
   return (
-    <div className="min-h-screen px-8 py-12">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
         <div>
           <h1 className="text-4xl font-bold mb-2">Color Playground</h1>
           <p className="text-muted-foreground">
@@ -206,8 +206,8 @@ function PlaygroundContent() {
 export default function PlaygroundPage() {
   return (
     <Suspense fallback={
-      <div className="min-h-screen px-8 py-12">
-        <div className="max-w-7xl mx-auto flex items-center justify-center">
+      <div className="min-h-screen py-12">
+        <div className="max-w-7xl mx-auto px-8 flex items-center justify-center">
           <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       </div>