Проблема с CSS-флексбоксом ⇐ Html

[Anonymous]

У меня есть контейнер с несколькими элементами, отображаемыми с помощью CSS Flexbox, с

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

flex-wrap: wrap

[/b] и

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

justify-content: center

[/b], чтобы элементы были визуально центрированы и быстро переносились. Каждый элемент имеет фиксированную ширину.
Над этим контейнером у меня есть заголовок, и я хочу, чтобы левый край заголовка точно совпадал с левым краем первого элемента (поле 1).
Проблема в том, что когда элементы центрируются с помощью

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

justify-content: center

[/b] и перенос, левый край первого элемента смещается при изменении размера экрана, поэтому заголовок не остается на одном уровне с полем 1.
Как я могу:

• Сохранять гибкие элементы по центру и естественным переносом.
• Выровнять заголовок так, чтобы его левый край всегда начинался точно на одном уровне с левым краем первого элемента.
  item.

Я пробовал обернуть заголовок и контейнер, но, поскольку ширина контейнера динамически меняется в зависимости от размера экрана, я не могу указать фиксированную ширину.
Я поделился своим кодом ejs и css для справки.

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

.home-container {
padding: 28px;
margin-left: auto;
margin-right: auto;
max-width: 90vw;
}

.flex-container {
display: flex;
flex-direction: column;
gap: 16px;
width: fit-content;
align-items: flex-start;
}

.listings-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
width: 100%;
justify-content: center;
width: fit-content !important;
}

.heading {
font-size: 18px;
color: #222;
font-weight: 600;
}

.card-container {
height: 20rem;
width: 18rem;
cursor: pointer;
}

.card-img {
width: stretch;
height: 16rem;
border-radius: 1rem;
margin-bottom: 10px;
}

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

All Listings 

[url=/listings/

Title
Card text


[/url]

Подробнее здесь: https://stackoverflow.com/questions/798 ... xbox-issue