The third card that keeps dropping

Intermediate

🎫 Client ticket

Three cards should fit neatly side by side, but the third one keeps wrapping onto a new line. Each card is set to a third of the width, yet somehow they're too wide for the row.

🔧 Your fix

HTML CSS

👁 Live preview

Hint: By default, padding and border are ADDED on top of the width, so each card is actually wider than 33%. One property makes width include the padding and border.

The fix:

.row { display: flex; gap: 10px; }
.card {
  box-sizing: border-box;
  width: 33%;
  padding: 20px;
  border: 4px solid #FF6B00;
  background: #efeaff;
}

·Cards include padding & border inside their width

✅ Fixed! Case closed.

You found the faulty line and corrected it — exactly what real debugging feels like.

Why it broke: With the default content-box sizing, width: 33% applies to the content only — the 20px padding and 4px border are added on top, pushing each card past a third of the row. Adding box-sizing: border-box makes the width include padding and border, so three cards finally fit. Pros set this on everything at the top of their CSS.

← Previous case

The photo that spills off phones

→

Back to all cases