Why does an element’s percentage width look larger than expected?

It is 80% of the width of its containing block—the block CSS uses as the reference for that element’s percentage width. It is not automatically 80% of the viewport, the whole page, or whichever ancestor you happen to be thinking about. [S1]

For a straightforward nested example, suppose the parent’s relevant width is 400px and the child is set to 80%:

<div class="parent">
  <div class="child">Content</div>
</div>

.parent { width: 400px; }
.child { width: 80%; }

Under those assumptions, the child’s percentage-based width is 320px: 0.8 × 400 = 320. The parent’s relevant width is what makes the calculation meaningful; the percentage alone does not tell you the pixel size. MDN describes percentage width as relative to the containing block and gives an example based on a parent container. [S1]

Start with the element whose width looks surprising. Identify the containing block used as its percentage reference, then measure that block’s width. Don’t substitute the page width or a nearby wrapper just because it is visually prominent; the relevant question is which block contains the element for this sizing calculation. [S1]

Next, write down the numbers. If the reference width is 500px and the child is 80%, calculate 0.8 × 500 = 400px. Compare that result with the child’s measured width. If you had been calculating from a different ancestor, the two calculations will differ. Keep the example’s assumption explicit: the 500px figure must be the width of the actual containing block, not simply any ancestor that happens to measure 500px.

Check whether you are comparing the same part of the box. A declared width and the visible outside width may not refer to the same measurement: box-sizing can affect whether the width describes the content area or the border area. [S1] Padding and borders are also worth checking when comparing the content and outside edges.

For example, if the calculated width is 320px, don’t assume the outside edge-to-edge measurement must also be 320px. Compare content width with content width, or compare the outer border edges with each other. Then confirm that the percentage calculation used the containing block’s width. This separates a mistaken reference width from a mismatch between the declared width and the part of the box you measured.

Use this sequence, recording each value rather than relying on visual estimates:

1. Select the element whose width looks unexpected.
2. Identify the containing block used as its percentage reference. [S1]
3. Record that block’s width and the child’s percentage.
4. Calculate: reference width × percentage ÷ 100. For example, 500 × 80 ÷ 100 = 400px.
5. Compare the result with the child’s measured content width or outside width, making sure the measurements describe the same part of the box.
6. Check padding, borders, and box-sizing if the measurements differ. [S1]

A compact note can help: percentage: [value]; containing block: [element]; reference width: [px]; calculated width: [px]; measured part: [content/outer]; padding/borders/box-sizing: [values].

The example explains the arithmetic once the reference is known; it does not determine the containing block for every layout. Verify that reference before changing the percentage.