Keep width with border-box

Include padding and border in the card’s declared width.

Official sourceW3C CSS Box Sizing — box-sizingReviewed: 2026-08-26

STEP 1 · LEARN

How it works

With box-sizing: border-box, width describes the outer border edge. Padding and border are taken from the content space instead of increasing total width.

Correct example

.card { box-sizing: border-box; width: 100%; padding: 24px; border: 2px solid #334155; }

The card stays within its container even with padding and a border.

Common mistake

.card { box-sizing: content-box; width: 100%; padding: 24px; border: 2px solid #334155; }

With content-box, padding and border are added beyond width: 100% and can cause overflow.

STEP 2 · APPLY

Your exercise

Complete box-sizing with border-box and keep width: 100%.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The card uses border-box.
The fluid width remains 100%.
The target card is present.

Explain the solution logic

border-box makes width include the content area, padding and border, so the card stays inside its container.

How it works

Your exercise

Write and see the result

What needs to pass