Debug: CSS layout not working as expected

CSS layout doesn't match expectations. Elements overflow, don't center, or have unexpected sizing.

Systematic CSS debugging approach:

1. Add temporary borders to visualize boxes:

* { outline: 1px solid red !important; }
/ outline doesn't affect layout (unlike border) /

1. Common flexbox issues:

- Items not centering: ensure container has height
.container { display: flex; height: 100vh; align-items: center; }
- Items not wrapping: add flex-wrap: wrap;
- Item stretching: add align-self: flex-start;
- Item overflowing: add min-width: 0; (flex items default min-width: auto)

1. Common grid issues:

- Content overflowing grid: use minmax(0, 1fr) instead of 1fr
- Grid not filling height: set height on container
- Unexpected gaps: check for margin on children

1. Box model issues:

- Always use: , ::before, *::after { box-sizing: border-box; }
- Padding/border increase element size without border-box

1. Viewport issues:

- 100vh on mobile doesn't account for browser chrome
- Fix: use 100dvh (dynamic viewport height)
- Or: height: 100svh; (small viewport height)

1. DevTools techniques:

- Elements > Computed tab: see actual sizes
- Flex/Grid overlay: click badge in Elements panel
- Toggle element states (:hover, :focus)
- Force element state to debug transitions

1. Overflow debugging:

html { overflow-x: hidden; } / Temporary, find the cause /
/ Find the overflowing element: /
document.querySelectorAll('*').forEach(el => {
if (el.scrollWidth > el.clientWidth) console.log(el);
});