Оправдать элементы горизонтально в подгриде ⇐ CSS

[Anonymous]

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

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

middle-start

), как поместить его в середину экрана?
Тот же вопрос о тексте в основном разделе.

ОБНОВЛЕНИЕ №2:
Как изменить код, чтобы получить результат, как показано ниже?

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

    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...

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