layout

Cards that refuse to line up with the navbar logo come down to gutters: every container moved from px-4 sm:px-6 lg:px-8 to px-3 sm:px-4.

TL;DR: A misaligned card row turned out to be a Tailwind gutter mismatch: the main section used px-4 sm:px-6 lg:px-8 while the navbar used px-3 sm:px-4, leaving a 16-pixel difference at large screens. The fix normalized every max-w-6xl and max-w-7xl container to px-3 sm:px-4, giving one source of truth. Lesson: straight-line misalignment usually means two padding systems assumed identical.

Refactoring the navbar and footer from a max-w-6xl pill into full-bleed bars: max-width moves up one level while content stays mx-auto max-w-6xl.

TL;DR: The blog's pill-shaped header and footer became full-bleed bars with semi-transparent backgrounds and backdrop blur. The trick: the outer element spans the whole viewport while inner content stays wrapped in mx-auto max-w-6xl for readability. A permanent border slot that transitions from border-transparent to visible on scroll prevents any layout shift.