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

@@ -37,8 +37,8 @@ export default function DistinctPage() {
   };
 
   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">Distinct Colors Generator</h1>
           <p className="text-muted-foreground">

app/palettes/gradient/page.tsx

@@ -52,8 +52,8 @@ export default function GradientPage() {
   };
 
   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">Gradient Creator</h1>
           <p className="text-muted-foreground">

app/palettes/harmony/page.tsx

@@ -52,8 +52,8 @@ export default function HarmonyPage() {
   };
 
   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">Harmony Palette Generator</h1>
           <p className="text-muted-foreground">

app/palettes/page.tsx

@@ -27,8 +27,8 @@ export default function PalettesPage() {
   ];
 
   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">Palette Generation</h1>
           <p className="text-muted-foreground">