Как отцентрировать контейнер с контентом

Проблема состоит в том, что я не понимаю, каким образом делается подобный враппер и устанавливается в середине контейнера-родителя.
Каким образом элементы располагаются фиксированно в центре? Я так понимаю, это внутренний div, который и фиксирует весь контент - но могу и ошибаться.

Вот моя попытка:
CSS:
@font-face {
font-family: BebasNeue; src: url("BebasNeue Bold.ttf"), url("BebasNeue Book.ttf"), url("BebasNeue Light.ttf"), url("BebasNeue Thin.ttf"), url("BebasNeue Regular.ttf");
}
@font-face {
font-family: logo; src: url("../fonts/logo_lobster_1_4.otf");
}
main {
max-width: 1280px;
}
.wrapper {
max-width: 1024px;
}
#logo { font-size: 49px; font-family: logo, BebasNeue, serif; color: #3cc3b5;
}
HTML:

Aditii

span some text

Ответ

Раньше делали так:
.wrapper { background: cyan; } .container { width: 100%; max-width: 80%; margin: 0 auto; background: rgba(0, 0, 0, .3); }

Content

Контейнер центрируется за счет margin: 0 auto;, при этом не растягивается больше max-width
Сейчас нам доступны флексбоксы:
.wrapper { background: cyan; display: flex; justify-content: center; } .container { flex-grow: 1; max-width: 80%; background: rgba(0, 0, 0, .3); }

Content

Здесь flex-grow: 1; у конейтнера нужен, чтобы он растягивался на максимально доступную ему ширину.