Centering

Our section with the cards is 80% wide, but it sits at the left edge of the page. To center it, we'll use one of the most common declarations in CSS:

margin: 0 auto;

The first value, 0, is the margin at the top and bottom. The second one, auto, is the margin on the left and right: the browser splits the free space next to the element equally between them, so the element ends up in the middle.

This only works when the element has a width set, like our width: 80%. Without it, the element is as wide as its parent, and there's no free space to split.

Don't confuse it with text-align: center: that centers the text inside its box, while margin: 0 auto centers the box itself.