Debugging Common CSS Bugs

Badar KhalilUpdated October 1, 2026 2 min read

Debugging Common CSS Bugs

Every developer eventually hits the same set of frustrating CSS bugs — an element that won't center, a z-index that refuses to stack correctly, or unexplained scrollbars. This guide walks through the most common CSS debugging scenarios and how to fix them.

Why CSS Bugs Are Tricky

CSS bugs are often invisible in the code itself — the syntax is valid, but the rendering doesn't match expectations because of inheritance, specificity, or box model interactions that aren't obvious at a glance.

1. Margin Collapse Confusion

Vertical margins between sibling block elements collapse into a single margin (the larger of the two), which surprises developers expecting margins to add together. Using padding, a border, or display: flex on the parent prevents collapsing.

2. Z-Index Not Working

Cause	Fix
Element has no 'position' set	z-index only works on positioned elements (relative, absolute, fixed, sticky)
Parent has a lower stacking context	A child can never visually appear above elements outside its parent's stacking context, regardless of z-index value
transform or opacity on parent	These properties create a new stacking context that traps child z-index values

3. Unexpected Horizontal Scrollbar

Check for elements wider than their container (e.g. fixed-width images or wide tables)
Look for negative margins pushing content outside the viewport
Check for box-sizing issues where padding adds to the total width

4. Element Won't Center

Centering Goal	Solution
Horizontal centering of block element	margin: 0 auto; with a defined width
Horizontal + vertical centering	display: flex; justify-content: center; align-items: center; on parent
Centering text only	text-align: center;

5. Flexbox/Grid Items Not Behaving as Expected

Issue	Likely Cause
Flex items not wrapping	Missing flex-wrap: wrap; on the container
Grid items overflowing columns	Content with min-width: auto (default) not shrinking — add min-width: 0;
Uneven flex item sizes	Missing or inconsistent flex-grow/flex-shrink/flex-basis values

6. Using DevTools to Debug CSS

Browser DevTools let you inspect the computed box model, toggle individual CSS rules on/off, and view the exact specificity of competing selectors — the fastest way to pinpoint why a style isn't applying as expected.

Try It Yourself

Use the live examples below to practice spotting and fixing common CSS bugs.

Try it Yourself HTML

<!-- Z-index bug: child can't escape parent's stacking context -->
<div style='position: relative; opacity: 0.99; z-index: 1;'>
  <div style='position: absolute; z-index: 9999; background: red;'>I'm trapped!</div>
</div>
<div style='position: relative; z-index: 2; background: blue; height: 50px;'>I'm above it anyway</div>

Output

Press Run to execute.

Try it Yourself CSS

/* Fix: prevent margin collapse with flex */
.container {
  display: flex;
  flex-direction: column;
}

.container p {
  margin: 20px 0; /* no longer collapses between siblings */
}

Output

Press Run to execute.

Try it Yourself CSS

.flex-item {
  min-width: 0; /* fixes overflow in flex/grid children with long text */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Output

Press Run to execute.

Exercise: Fix the Z-Index BugCSS

The dropdown menu below has z-index: 999 but still appears behind the sidebar. Identify why (hint: check the parent's opacity/transform) and fix the CSS.

Try it Yourself CSS

.header {
  position: relative;
  transform: translateZ(0);
  z-index: 1;
}

.dropdown {
  position: absolute;
  z-index: 999;
}

.sidebar {
  position: relative;
  z-index: 2;
}

Output

Press Run to execute.

Show expected output

CSS adjusted so the dropdown's stacking context isn't trapped below the sidebar, either by raising the header's z-index or removing the unnecessary transform.

This is a self-check — compare your result with the expected output above.

Was this page helpful?