style: align header, content, and footer widths

Standardized all layout sections to use consistent max-width:
- Changed from inconsistent container/max-w-6xl to unified max-w-7xl
- Header: container mx-auto → w-full max-w-7xl mx-auto
- Main: container mx-auto → w-full max-w-7xl mx-auto
- Footer: container mx-auto → w-full max-w-7xl mx-auto
- MainConverter: removed max-w-6xl (inherits from parent)

All sections now align perfectly with matching left/right edges
for a clean, professional layout.

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

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

app/page.tsx

@@ -7,13 +7,13 @@ export default function Home() {
     <div className="min-h-screen bg-background flex flex-col">
       {/* Header with theme toggle */}
       <div className="border-b sticky top-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 z-40">
-        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
+        <div className="w-full max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
           <div className="text-xl font-bold">Units UI</div>
           <ThemeToggle />
         </div>
       </div>
 
-      <main className="container mx-auto px-4 py-8 flex-1">
+      <main className="w-full max-w-7xl mx-auto px-4 py-8 flex-1">
         <header className="text-center mb-12">
           <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">
             Unit Converter