HTML & CSS Course
HTML & CSS
/
Advanced

CSS Debugging Questions

Definition

Scenario-based questions where you are presented with a broken layout and asked how you would diagnose and fix it.

Explain Like I'm New

The interviewer describes a bug: 'The horizontal scrollbar keeps appearing on mobile, but there are no elements wider than 100%. Why?'. You have to explain your thought process and Chrome DevTools workflow.

Real World Example

Debugging margin collapse, z-index stacking context traps, or missing `box-sizing: border-box` resets.

Common Use Cases

  • •Senior Front-End Interviews

Interactive Example

 Interview Questions
basic
  • What is the easiest way to visually find an element that is causing a horizontal scrollbar??
intermediate
  • What is Margin Collapse?
Flash Cards
Question
Find overflow elements?
Click to reveal answer
Answer
Add `* { outline: 1px solid red; }` to your CSS. This instantly draws a red box around every single element on the page, revealing which one is sticking out past the screen edge.
Question
Margin Collapse?
Click to reveal answer
Answer
If a top div has `margin-bottom: 30px` and the bottom div has `margin-top: 20px`, they don't add up to 50px! Vertical margins collapse into each other, and the browser just picks the largest one. So the total space between them will be exactly 30px.