Common CSS Mistakes

Most CSS bugs aren't exotic — they're the same handful of misunderstandings recurring in different disguises. Recognizing them quickly saves hours of guessing.

Fighting specificity with more specificity

/* Bad: an escalating specificity war */
.sidebar .widget .title { color: black; }
#page .sidebar .widget .title { color: blue !important; }

When a style "won't apply," the instinct is often to add more classes, nest deeper, or reach for !important. This treats a symptom, not the cause — it usually means an earlier rule was written more specifically than it needed to be. The fix is almost always to go back and reduce the specificity of the original rule, not to out-escalate it.

Forgetting box-sizing: border-box

*, *::before, *::after {
  box-sizing: border-box;
}

As covered in the box model lesson, the default content-box sizing means padding and border add to your declared width instead of being included in it. Omitting this reset is one of the most common causes of "my two 50%-width columns don't fit side by side" bugs — they don't, because each one is secretly wider than 50% once padding is added.

Absolutely positioning without a relative parent

.card {
  /* forgot position: relative here */
}

.card .badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

An absolute element positions itself relative to the nearest positioned ancestor — if none exists, it falls back to the entire page (the initial containing block), often jumping to a completely unexpected spot. Whenever you write position: absolute, immediately check that the intended parent has position: relative (or absolute/fixed/sticky).

Using margin where gap would do

/* Bad: manual margin management */
.item { margin-right: 16px; }
.item:last-child { margin-right: 0; }

/* Better */
.list {
  display: flex;
  gap: 16px;
}

Before gap was well-supported in Flexbox and Grid, spacing items required margin on every item plus a :last-child override to avoid trailing space. If your layout is already Flex or Grid, gap is simpler and avoids the collapsing-margin edge cases entirely.

Relying on fixed heights

/* Fragile: breaks the moment content is longer than expected */
.card {
  height: 200px;
}

A fixed height looks fine with placeholder text and breaks the moment real content (a longer title, a translated string, user-generated text) doesn't fit — causing overflow or clipped text. Prefer min-height, or no explicit height at all, and let content determine size unless there's a specific design reason to clip it (like a fixed-size thumbnail with object-fit).

Not testing keyboard focus and zoom

Styles that only get tested with a mouse, at 100% zoom, on one screen size, often break under a keyboard user's focus outline, a 200% browser zoom, or a narrow viewport. A quick pass — tab through the page, zoom in, resize the window — catches a surprising fraction of real-world CSS bugs before a single user ever reports them.