Debugging CSS by testing one explanation at a time

By Gyata Tabiri · Revised October 30, 2026

When a layout is wrong, I want the next change to test an explanation. Looking at the computed result and its surrounding context is more useful than accumulating overrides until the screen happens to look right.

Inspect the computed result

Use browser developer tools to find the declaration that actually applies. Check inherited values, selector specificity, media queries, and the box model. A rule in the file is not evidence that the browser is using it.

Check the surrounding context

A child’s size or position can depend on a parent’s layout. For overlapping elements, inspect stacking contexts rather than increasing z-index repeatedly. For overflow, compare the content’s minimum needs with the available width.

Reduce the example

Temporarily isolate a component or remove one constraint at a time. Test a clear explanation and observe the result. When a change has no effect, return to inspection rather than adding another override in a different part of the stylesheet.

Verify beyond the original screen

Check the fix at the width where the problem appeared, nearby widths, and other uses of the same component. Include keyboard focus and expanded states where relevant. A useful fix has a bounded reason and does not simply move the problem out of the first screenshot.

A clear diagnosis makes the fix easier to review and less mysterious to maintain. The next person should be able to see which condition caused the problem and why the change addresses it.

Website work · Discuss a role or project

Reference: Understanding stacking contexts.