position at start, elements inside a justified div - css [duplicate]

Question

I have a problem in css that I can't solve. I have a 'container' div, which has several sections as children.

.container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-height: 1000px;
  background-color: wheat;
  justify-content: center;
  justify-self: flex-start;
}

.container .box {
  width: 25%;
  justify-self: flex-start;
  height: 200px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, .25);
}

<div class="container">
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
</div>

I need the last sections to start showing as the previous sections are shown. I have tried with justify-self: flex-start in each section, but nothing, how can the last two sections be displayed in the same way that the previous ones are positioned? . Thank you

Answer 1

What you need is justify-content: flex-start. If you want to center you container div, you'll have to do it differently. You can center it in a parent div for instance, but you can't use justify-content: center and exempt the last row.