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

[Anonymous]

У меня есть контейнер с несколькими элементами, отображаемыми с помощью CSS Flexbox, с flex-wrap: wrap и justify-content: center, чтобы элементы были визуально центрированы и быстро переносились. Каждый элемент имеет фиксированную ширину.
Над этим контейнером у меня есть заголовок, и я хочу, чтобы левый край заголовка точно совпадал с левым краем первого элемента (поле 1).
Проблема в том, что когда элементы центрируются с помощью justify-content: center и перенос, левый край первого элемента смещается при изменении размера экрана, поэтому заголовок не остается на одном уровне с полем 1.
Как я могу:

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

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






All Listings





[url=/listings/





₹




[/url]








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


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