The badge that won't centre

Intermediate

🎫 Client ticket

The 'Sign up' badge is supposed to sit dead-centre of the purple banner. Instead it's stuck in the top-left corner. The developer insists they already added the centering lines.

🔧 Your fix

HTML CSS

👁 Live preview

Hint: justify-content and align-items only do anything on a flex (or grid) container. The banner is missing the one line that turns it into a flex container.

The fix:

.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 160px;
  background: #3C3489;
}
.badge {
  background: #fff;
  padding: 10px 18px;
  border-radius: 8px;
}

·.banner is now a flex container

✅ Fixed! Case closed.

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

Why it broke: justify-content and align-items have no effect unless the element is actually a flex (or grid) container. Adding display: flex to .banner activates them, and the badge snaps to the centre. The centering lines were correct all along — the container just wasn't flex.

← Previous case

The image that failed the accessibility audit

Next case →

The photo that spills off phones