block-level elements
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). They begin on new lines. Several values of the ‘display’ property make an element block-level.
Contrary to popular belief, the default width of a DIV is not ‘100%’, but ‘auto’. The margin box of a DIV is as wide as the content box of its containing block. The margin here does not trigger a scrollbar (at the bottom of the viewport), it only shrinks the border box.
Percentages are calculated based on the containing block.
Style the aqua box with:
margin-top: 50%;