Why does a block element take the full width of its parent?

That is the usual behavior for a block in normal flow. When you leave its width unspecified, the browser calculates the automatic width, and the block fills the available space in the inline direction of its container. Headings and paragraphs are common examples of elements that are block-level by default. [S1] [S2]

For example, if a parent has 600 pixels of available width, a plain block with width: auto will generally occupy that available width. Its content may be much narrower; the block’s box can still span the parent. This is useful when you want a background, border, or alignment area to extend across the container.

The width is relative to the containing block, not necessarily the whole browser window. So if the parent itself is narrower, the child’s automatic width fills that narrower space instead. [S2]

Here is a small comparison. Assume the parent has 600 pixels of available width and no other sizing constraints:

.parent {
  width: 600px;
  background: #eee;
}

.automatic {
  width: auto;
  background: lightblue;
}

.half {
  width: 50%;
  background: lightgreen;
}

The .automatic block uses the available inline space. The .half block asks for half the containing block’s width, so under this assumption its content width is 300 pixels. Percentage widths are calculated relative to the containing block. [S2]

You can also use a limit when you want a block not to grow beyond a chosen size:

.reading-area {
  width: 100%;
  max-width: 40rem;
}

That sets a maximum, but it does not guarantee a particular rendered outer width in every layout: the available space and other sizing rules still matter.

Check what the width value measures. Ordinarily, width sets the content-area width. Padding and borders can add to the rendered outer size; with box-sizing: border-box, the specified width instead includes the border area. Also check whether min-width or max-width is changing the result. [S1] [S2]

For a quick comparison, try this on the element:

.example {
  width: 300px;
  box-sizing: border-box;
  padding: 16px;
  border: 2px solid #333;
}

With border-box, the 300-pixel width includes the padding and border. Without that setting, those additions can make the outside measure larger than the content width. The example illustrates sizing only; your parent and surrounding layout still determine the space available.

Work from the containing block outward. First identify the element’s parent and the width available there. Next inspect the element’s computed width and look for min-width or max-width; those can affect the specified result. [S2] Then check padding, borders, and box-sizing to distinguish the content width from the outer box. [S1] [S2]

For instance, if your goal is a constrained reading area, try width: 100%; max-width: 40rem;. Treat this as a starting point: the width limit is the relevant sizing rule, while the available space and other sizing rules still matter.

These checks explain common block-width behavior, but they do not establish how every layout mode or stylesheet rule will behave. If the result remains unexpected, reduce the page to the element, its parent, and the CSS rules affecting their widths.