Layout bugs look scary because the symptom is often far from the cause. A horizontal scrollbar on the whole page comes from one element, somewhere, that is wider than it should be. The trick is to find that element instead of hiding the scrollbar.

Start at the element that looks wrong

Select it in DevTools and read the box-model diagram in the Layout or Computed panel. Compare the numbers with what you expected. A width: 100% plus padding: 1rem under content-box gives you a box wider than its parent, and the diagram shows it right away.

Look at the badge next to the element in the Elements panel too. flex or grid tells you which layout algorithm is in charge, and clicking it turns on the overlay.

Outline everything

When you don’t know which element overflows, make every box visible:

* {
  outline: 1px solid rgb(255 0 0 / 25%);
}

Paste it into a new style rule in DevTools. Outlines don’t take up space, so nothing moves. Now scroll right and the box that sticks out past the page edge shows itself. Remove the rule when you’re done.

The usual suspects

The cause is almost always one of these:

a fixed width in pixels on something that should be max-width
a long unbreakable string, like a URL or a token, that can’t wrap
an image with no max-width: 100%
a flex item that won’t shrink because of its auto minimum, and needs min-width: 0
a 1fr grid track growing to fit its content, which wants minmax(0, 1fr)
an absolutely positioned element that escapes its parent because no ancestor has position: relative
a negative margin or a 100vw width that ignores the scrollbar

Check them in that order. The first three cover most cases.

Use the overlays

For Flexbox and Grid problems, the DevTools overlays show tracks, gaps, axes, and free space on the real page. A card that won’t align usually has a different align-self, or sits on a different flex line than you thought. The overlay shows that in a second.

Don’t hide the symptom

The worst fix for a horizontal scrollbar is this:

body {
  overflow-x: hidden;
}

The scrollbar disappears. The element that was too wide is still too wide, and now the part that sticks out is unreachable. Someone zooming in loses content with no way to scroll to it. Find the element, fix its width, and you won’t need this rule.

Try it on the course page: narrow the window, paste a long URL into a card, and watch the scrollbar appear. Use the outline trick to find the box, then fix it with overflow-wrap: anywhere on the card. See it, find it, fix the cause.

Debug layout and overflow