Выравнивание элементов по горизонтали внутри подсетки ⇐ CSS

[Anonymous]

Существует обычный макет с элементами Flexbox в заголовке Ul и некоторым текстом в основном разделе p .
Оба имеют максимальную ширину = 1200px и помещен для начала средней части страницы с использованием именованных сетей и subgrid .
Как оправдать заголовок ul и основной раздел p < /code> Содержание горизонтально и сохранить ширину = 1200px одновременно в случае большой ширины экрана? Snippet-Code ">

Код: Выделить всё

    body {
margin: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#app {
height: 100dvh;
display: grid;
grid-template-rows:
[head-start] auto [head-end main-start] 1fr [main-end];
grid-template-columns:
[full-start] 5% [middle-start] auto [middle-end] 5% [full-end];
}
.header-contaiter {
grid-row: head-start / head-end;
grid-column: full-start / full-end;
display: grid;
grid-template-columns: subgrid;
}
header {
grid-column: middle-start / middle-end;
max-width: 1200px;
display: flex;
justify-content: space-between;
gap: 5px;
}
.header-contaiter header ul {
display: flex;
gap: 20px;
}
main {
grid-row: main-start / main-end;
grid-column: full-start / full-end;
display: grid;
grid-template-columns: subgrid;
}
section {
grid-column: middle-start / middle-end;
max-width: 1200px;
}< /code>



Test






[list]
[*]Item-1
[*]Item-1
[*]Item-1
[*]Item-1
[/list]
[list]
[*]Item-1
[*]Item-1
[*]Item-1
[*]Item-1
[/list]
[list]
[*]Item-1
[*]Item-1
[*]Item-1
[*]Item-1
[/list]




Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni optio similique officiis sit praesentium debitis velit, cumque veritatis quia voluptatibus, accusamus, voluptates neque aperiam blanditiis. Id atque eos placeat quod.

Подробнее здесь: https://stackoverflow.com/questions/793 ... in-subgrid