Changing from CSS grid layout to flexbox

I was tasked with changing given code that was using CSS grid to one using CSS flexbox layout.

This was the given HTML structure:

<div class="listing-grid"><div class="listing"><img class="listing-image" src="something.jpg" alt="something"><div class="listing-details"><h3>Item 1</h3></div><div class="listing-price"><p>Price: €8</p></div><a href="details.html" class="details-button">Details</a></div><div class="listing"><img class="listing-image" src="something.jpg" alt="something"><div class="listing-details"><h3>Item 2</h3></div><div class="listing-price"><p>Price: €5/p></div><a href="details.html" class="details-button">Details</a></div>...(4 more of these card like elements)<div>

.listing-grid {    display: grid;    grid-template-columns: repeat(auto-fit, 300px);    gap: 10px;    padding: 10px;    justify-content: center;    align-content: center;}

The code produced a grid that looked like this:

item1 item2 item3 item4item5 item6

When I changed to flexbox using:

.listing-grid {  display: flex;  flex-wrap: wrap;  gap: 10px;  padding: 10px;  justify-content: center;  align-content: center;}and adding to:.listing {  width: calc(25% - 20px);}

I got this kind of a layout:

item1 item2 item3 item4      item5 item6

I tried changing the justify-content: center to justify-content: left, but this aligns the cards to the left and shifts the whole section to the left, which is not suitable for me. Also doing this, but adding margin-left seems like a dumb way to solve this, especially since it is not responsive.

Any other way to achieve this with preserving the responsive design and the desired card layout, while also using flexbox layout?