Common CSS Layout Bugs and How to Fix Them

You now know the box model, display types, flexbox, grid, positioning, and the cascade. This lesson is different from the others: instead of introducing a new concept, it's a practical field guide to the specific bugs that trip up almost every beginner, tying together everything from previous lessons into real diagnosis and fixes. Treat this as a reference you'll come back to.

Box Sizing And Spacing Bugs

Bug one: an element's width seems wrong, or two side-by-side boxes don't fit even though their percentages add up to 100%. This is almost always the box-sizing issue from lesson three: padding and border are being added on top of the specified width, rather than included in it.

.column {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
}

Fix: add box-sizing: border-box (ideally globally with the universal selector), so padding and border are absorbed into the stated width instead of adding to it.

Bug two: unexpected extra space above or below an element, or between elements, that doesn't seem to come from any margin or padding you set. This is frequently margin collapsing between vertical block elements (lesson three), or default browser margins that elements like h1, p, and ul come with out of the box, which beginners often don't realize exist until they inspect the element.

* {
  margin: 0;
  padding: 0;
}

A very common first line in real project stylesheets is a reset like this (or a more selective version targeting specific elements), explicitly zeroing out inconsistent browser defaults so you're always starting from a known, predictable baseline rather than guessing what margin the browser silently added.

Positioning And Flex Sizing Bugs

Bug three: an absolutely positioned element shows up in a totally wrong place, often the far corner of the whole browser window instead of inside its intended parent. This is the lesson-ten bug: the nearest ancestor needs position: relative (or another non-static value) to act as the positioning anchor.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

Fix: trace up the HTML tree from the absolutely positioned element and confirm some ancestor actually has a non-static position set. If none do, the browser falls back to positioning relative to the page itself.

Bug four: flex or grid items aren't lining up or sizing the way you expect, especially items appearing to ignore width entirely. Flex items with flex-grow or flex shorthand set will often override an explicit width, since flex-basis effectively takes over sizing along the main axis. Mixing width and flex on the same item without understanding this interaction is a common source of confusion.

.item {
  flex: 0 0 200px;
}

Fix: if you want a fixed-size flex item, set flex: 0 0 <size> (don't grow, don't shrink, fixed basis) rather than fighting between width and a flex-grow value of 1.

Background And Overflow Bugs

Bug five: a background image repeats in an ugly tiled pattern. As covered in lesson six, this is simply the default background-repeat behaviour.

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

Bug six: text or content overflows its container, spilling outside a card's rounded border or background. This often happens with long, unbroken strings like URLs or long names, or with images that don't respect their container's width.

.card {
  overflow: hidden;
  border-radius: 12px;
}

.card img {
  max-width: 100%;
  display: block;
}

.card p {
  overflow-wrap: break-word;
}

max-width: 100% on images is one of the most important single lines in all of responsive CSS; without it, an image's natural pixel dimensions can force it wider than its container, breaking the whole layout. overflow-wrap: break-word lets long unbreakable text wrap rather than overflow. overflow: hidden on the card itself clips anything that still escapes, which also happens to make rounded corners apply cleanly to child content like images.

Stacking And Specificity Bugs

Bug seven: a sticky or fixed element doesn't stick, or a z-index seems to be ignored. As covered in lesson ten, position: sticky depends on its scrolling ancestor's overflow settings, and z-index only has any effect on elements with a non-static position, so a z-index on a plain static element does literally nothing, a detail that quietly causes a lot of confusion.

Bug eight: styles that look correct in the CSS file simply never apply at all. This is almost always a lesson-thirteen specificity fight (a stronger selector elsewhere is winning), a typo in the selector itself (lesson two), or, surprisingly often, a simple cache issue where the browser is still showing an old cached version of your CSS file rather than your latest saved changes.

Practical Tips And Exercise

Practical tip: when any layout bug appears, always open developer tools first and inspect the actual element, rather than guessing from the code alone. Check its computed box model, its matched (and crossed-out) CSS rules, and its actual display and position values. The vast majority of "mystery" CSS bugs turn out to be one of the eight patterns above, visible immediately once you actually look.

A small challenge: deliberately recreate two or three of these bugs on a test page (for example, remove box-sizing and watch two 50% columns misalign, or remove position: relative from a parent and watch a status dot escape its card), then fix each one using the solutions above. Breaking something on purpose and then repairing it is one of the fastest ways to make these fixes permanently stick in memory.