Debugging and review
Debug layout and overflow
Find unexpected width, spacing, alignment, clipping, and horizontal scrolling by inspecting boxes and simplifying layout constraints.
9 minute lesson
~~~
Start at the element that looks wrong and inspect its box model and layout badge.
For overflow, temporarily outline everything:
* {
outline: 1px solid rgb(255 0 0 / 25%);
}Look for fixed widths, long unbreakable strings, images without flexible sizing, flex items that need min-width: 0, and positioned elements outside their container.
For Grid and Flexbox, use the DevTools overlay to see tracks, gaps, axes, and free space.
Do not hide horizontal overflow on the whole page before finding its source. That removes the scrollbar but can leave content unreachable.
Lesson completed