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>
Ensure consistent spacing and alignment between header, main content, and footer:
- Update Navbar to use max-w-7xl and px-8 (matching Footer)
- Standardize all page containers to use px-8 py-12 padding
- Change home page from max-w-5xl to max-w-7xl for consistency
- Update all 12 pages to use consistent padding (px-8 py-12 instead of p-8)
This creates a unified visual alignment across the entire application,
with all content sections (navbar, main, footer) using the same
max-width (7xl) and horizontal padding (px-8).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
