I have a container with multiple items displayed using CSS Flexbox, with flex-wrap: wrap and justify-content: center so that the items are visually centered and wrap responsively. Each item has a fixed width.
Above this container, I have a heading, and I want the heading's left edge to align exactly with the left edge of the first item (box 1).
The problem is that when the items are centered with justify-content: center and wrap, the left edge of the first item shifts as the screen size changes, so the heading doesn’t stay aligned with box 1.
How can I:
Keep the flex items centered and wrapping naturally.
Align the heading so its left edge always starts exactly aligned with the left edge of the first item.
I’ve tried wrapping the heading and container, but since the container width changes dynamically with screen size, I cannot give fixed widths
I have shared my ejs and css code for reference
<% layout("/layouts/boilerplate") %>
<body>
<div class="home-container">
<div class="flex-container">
<h3 class="heading flex-basis-1">All Listings </h1>
<div class="listings-container">
<% for (let item of listings) { %>
<a href="/listings/<%= item._id %>">
<div key="<%= item._id %>" class="card-container ">
<img src="<%= item.image.url %>" class="card-img" />
<div>
<div class="card-heading">
<%= item.title %>
</div>
<div class="card-text">
₹ <%= item.price.toLocaleString("en-In") %>
</div>
</div>
</div>
</a>
<% } %>
</div>
</div>
</div>
</body>
.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;
}
