This example explores nested blocks - one block inside another.
These principles apply to ANY HTML block elements.
div blocks are used for convenience.

The outer block is called the parent and the inner block is called the child. It's literally one block container inside another block container as you can see in the HTML source code.

The space between the two borders is the margin outside the child block PLUS the padding inside the parent block.
By default, both blocks expand horizontally as much as they can. Also by default, both blocks shrink vertically as much as they can.


This parent block has text-align: center;
This child block also has text-align: center;

Obviously, this shows that text-align will NOT center a block.


These blocks show how to center a child block in a parent block - the auto margin technique

Setting the left and right margins of the child block to auto tells the browser to automatically calculate the child margins, thereby keeping them equal regardless of the width of the browser window.

Nested blocks such as these are typically how panels are created as full-with stripes with centered content (often 1200px wide).

Note: the full-width "stripe" is not necessary.
Without the parent block, the child block would center itself in the browser's viewport. That way you can create centered content blocks without full-width stripes.