Tutorials · CSS debugging
Debug CSS layout problems with browser DevTools
A repeatable path from the visible symptom to the box, rule or overflow source that actually needs changing.
The useful version of a web practice is the one that can be repeated by someone else. This note keeps the scope tight, names the trade-offs and ends with a way to check the result. Continue with the CSS debugging index or meet the Sites To Use editorial desk behind the notes.
Reproduce at the useful width
Begin with the viewport where the problem matters, then widen and narrow it until the behaviour changes. Note the first dimension at which the layout breaks. This makes the breakpoint a clue instead of a guess.
Use the device emulation controls to compare the same route, not a simplified test page. Real content exposes the long label, image ratio or nested grid that a placeholder hides.
Inspect the box before the rule
Select the element and read its box model, computed size and containing block. Check whether the width comes from a fixed value, a max-width, a grid track or the content itself. The visible gap often belongs to the parent, not the child that appears to be drifting.
Toggle one declaration at a time in DevTools. When the layout moves, write down why before changing the source.
Fix the constraint, not the symptom
A one-off negative margin can hide overflow for one screen and create a second problem elsewhere. Prefer the smallest shared constraint that explains the issue: a min-width, a grid track, a flex basis or a missing wrap rule. Then repeat the test at both reference widths.
