The outline trick: see every box
Each red line is one element's border box. Notice the small gap under the green image: images are inline and sit on the text baseline. Add img { display: block; } and the gap disappears. Delete the outline rule when you're done.
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.