Understand the web. Build it yourself.

Search

All six exercises / Exercise 02

Find the bug

The card that escapes its container

Understand why 100% plus padding can be too wide.

Observe the evidence

The container is 260px wide. The card has 20px padding on each side and a 2px border on each side.

Starting code

CSS · EXAMPLE
.card { box-sizing: content-box; width: 100%; padding: 20px; border: 2px solid; }
Give me a hint

Is width measuring only the content or also the padding and border?

Read the solution and corrected code
CSS · EXAMPLE
.card { box-sizing: border-box; width: 100%; padding: 20px; border: 2px solid; }

With content-box the total border-box width is 260 + 40 + 4 = 304px. With border-box it is 260px. Margins remain outside both calculations. The preview has its own scroll area so the exercise cannot break this page.

Make the lesson your own

Increase padding. Then add a margin and explain why border-box does not include that margin.

Read the related guide →

Original exercise by Mario V.W.B.R. Obst with AI assistance. Technical reference: MDN documentation (new tab). Checked September 2026.

Next exercise →