Two classic bugs: percentage height and an escaping margin
height: 50% needs a parent with a definite height, so it resolves to auto (0px for an empty box) until the parent gets one. The paragraph's 24px margin collapses through .wrap and pushes the whole yellow box down; display: flow-root makes .wrap contain it.
Debugging CSS is a routine, not guesswork: inspect the element, check whether the rule matches and wins, read the computed value and the box model, use the Flexbox and Grid overlays, and know the handful of bugs that cause most layout problems.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A card in a flex row overflows when its title is a long word. Write the CSS fix and explain it.
Write a debug stylesheet rule that shows the boxes of every element inside .layout without changing the layout.
Explain it without notes
Walk through how you debug "my CSS isn't applying".
A page scrolls horizontally on mobile. How do you find and fix the cause?
Why might z-index: 9999 not bring an element to the front?
Why does a child's margin-top sometimes move its parent, and how do you stop it?
Preview
Console
Nothing logged yet.Expected console output
child height, parent auto: 0px
child height, parent 200px: 100px
gap above .wrap: 24
gap above .wrap with flow-root: 0