How to properly nest blocks in each other when laying out?

Question

css

Why, for example, when laying out a certain page element, for example header, do the following block structure:

<header> 
     <div class='container'>
        
      </div>
   </header>

That is, in addition to the header tag, there is also a nested container block. Why can’t you leave one header, set its width and height and layout the blocks nested in it, why do they usually make a container or a wrapper as well?

Answer 1

It is considered good practice to separate grid blocks from all others.
Page blocks usually take up the full width of the screen and have a full width background. And the content is limited in the center by the same container.
If the block does not stretch to the full width, then it is already in the container.

<div class='container'>
        <div class='header'>
        
      </div>
      </div>

Combining into 1 block is bad, because you have to set the width for all blocks, instead of setting it once in the container. And you can’t safely move the block to another place, or add other blocks to the same container.