How to position the last card on the left when moving to a new line without extra indent?

Question

css

There are cards, when the screen is reduced, they go to a new line, but they stand in the middle, tk. parent do like this:
align-items: center;

&:last-child{
      justify-content: flex-start;
    }

Everything is fine, but in general, the container on the right has extra space.
How to deal with it?
Here is a sandbox with my styles https://jsfiddle.net/q9pk5ner/1/

Answer 1

<div class="main">
  <div style="display: inline-block; margin: auto;">
    <div class="wrapper">
      <div>
        1
      </div>
      <div>
        2
      </div>
      <div>
        3
      </div>
      <div>
        4
      </div>
      <div>
        5
      </div>
      <div>
        6
      </div>
    </div>
  </div>
</div>