Aligning Container Gutters With the Navbar Edges

The new homepage was done; time to show it off. I opened it on a wide monitor, stepped back a bit to see the full screen, and my eyes caught it immediately: the row of cards in the main section sat slightly inset compared to the logo and menu in the navbar. The offset was thin, far from looking broken. But once the misalignment registered, it could not be ignored.

My first guess missed by a mile. I assumed the max-w-6xl was too wide, so the content overflowed and what needed shrinking was the card width. I even got suspicious of the grid and the gap between cards. In devtools I fiddled with card width, added left margins, changed the gap. The more I dug, the further I got from the answer, because the problem was never the cards.

The actual cause was far more boring.

Two gutters that never met

Inspect element, and two suspects appeared. The container in the main section used px-4 sm:px-6 lg:px-8. The navbar used px-3 sm:px-4. Each looks reasonable on its own, but run them together and the result differs.

A gutter is the distance from a container's edge to the content inside, and that is exactly the part that differed between two components that visually must align. From Tailwind's padding docs, px-<number> sets padding-inline, meaning it controls left and right padding at once ^[5]. Nilainya ngikut spacing scale: px-4 sama dengan 16 pixel, px-8 sama dengan 32 pixel ^[5]. The breakpoints are equally clear in the responsive docs: sm kicks in at 40rem (640px), lg at 64rem ^[6].

So on screens past lg, the cards got 32 pixels of padding-inline while the navbar logo got only 16 pixels ^[5]. That 16-pixel difference was exactly the thin line that made my eyes twitch. On small screens the gap still exists: 16 pixels for the section, 12 for the navbar ^[5].

A three-layer pattern like the section's is not unusual. Plenty of ready-made templates use similar combos, and when I copied one into this project long ago, the pattern came along everywhere. Including into the navbar, which for some reason I wrote in a more petite version at the time.

One source of truth

The fix needed no layout surgery. I normalized every max-w-6xl and max-w-7xl container to px-3 sm:px-4.

lg:px-8 was removed outright. A dozen-plus files were touched, among them the blog page, AboutServices, AboutSkills, and AboutTimeline. Each file changed a single class line, so it was a quick visit with no drama. Finding them all was easy too: search every occurrence of max-w-6xl and max-w-7xl, then check them one by one. Those two widths serve different needs, but their gutters must match for the edges to connect.

Here is the logic. Before, gutters at each breakpoint were decided by three layers of values stuck onto individual components. The moment one component carried a different combo, the straight line cracked, exactly like the navbar incident. After normalizing, each breakpoint has a single source of truth. No three-layer stack left to drift apart.

The side effect is pleasing. Before, the section and navbar gutters shifted at different moments: the section moved twice across a resize while the navbar moved once. Now both shift together at the same breakpoint ^[6]. Drag a resize slowly past 640px and the line stays connected from narrow to wide.

If forced to choose a direction, I deliberately aligned everything to the navbar, not the other way around. Eyes lock onto the logo and menu first, so that is the visual anchor; the cards follow. The three-layer pattern is also, in my view, an easy source of drift since each component carries its own copy. The more copies, the bigger the chance one gets missed on the next update.

The small lesson: straight-line alignment problems in UI are almost never about element sizes; they are two padding systems that happened to be assumed identical. Now, whenever I build a new container, I just copy px-3 sm:px-4 from the navbar and done.

Sumber

• Dokumentasi Tailwind CSS: padding [5]
• Dokumentasi Tailwind CSS: responsive design [6]