The layout bug that vanished when I changed the copy

The bug that only existed between 1024px and 1280px

The bug showed up as a horizontal scrollbar on a Gate Seal product page, but only on screens between 1024px and 1280px. Below that, the layout was fine. Above that, also fine. At exactly 1120px, the container would overflow by 14 pixels and trigger a horizontal scroll.

The section was a two-column layout with a product image on the left and a “Key Features” list on the right.

I spent an hour in DevTools hunting for a margin, padding, or min-width that could explain those extra 14 pixels.

When the CSS is technically correct

The CSS for the layout was straightforward:

• A grid with grid-template-columns: 1fr 1fr;
• gap: 2rem (Tailwind’s gap-8)
• The image set to max-width: 100%;
• The text column with no fixed width

I checked the computed styles, the box model, and the paint layers. Nothing exceeded its container. No child reported a width larger than the grid. The overflow was invisible in the DOM because it was not a layout property causing it; it was a content property.