Центрирование

Наша секция с карточками занимает 80% ширины, но прижата к левому краю страницы. Чтобы отцентрировать её, воспользуемся одним из самых частых объявлений в CSS:

margin: 0 auto;

Первое значение, 0, — внешний отступ сверху и снизу. Второе, auto, — отступ слева и справа: браузер делит свободное место рядом с элементом между ними поровну, и элемент оказывается посередине.

Это работает, только если у элемента задана ширина, как у нашей width: 80%. Без неё элемент так же широк, как его родитель, и делить свободное место нечего.

Не путайте это с text-align: center: он центрирует текст внутри блока, а margin: 0 auto центрирует сам блок.