How to leave enough space to align elements with space-evenly and :after?

I use the pseudo-element :after to align at the left the last line of a list of blocks. I used space-evenly to justify these blocks. My problem is that the blocks of the last line aren't aligned with the users because of the :after that taking up the space. How can I fix that?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.exposegrid {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  &:after {
    content: "";
    flex: auto;
  }
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

<!-- language: lang-html -->

<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
</div>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

   .exposegrid {
      width: 500px;
      display: grid;
      grid-template-columns: repeat(auto-fill, 100px); /* this will create cells that will fill the space , if there is space of five, then each row will have five*/
      gap: 10px /*instedt of margin, use gap to space cells*/
    }
    .exposetab {
      width: 100px;
      height: 66px;
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(0, 0, 0, 0.4);
      border-radius: 5px;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }

<!-- language: lang-html -->

<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
</div>

<!-- end snippet -->

just use display: grid; it was meant for that type of layout, for example

.exposegrid {
   width: 500px;
   display: grid;
   grid-template-columns: repeat(auto-fill, 100px);
   gap: 10px
}

The:after pseudo-element is occupying space in the flex container and interfering with the alignment of the items in the last row, which is the root cause of the problem you're encountering. Use of a margin on the:after pseudo-element as an alternative to flex auto is one approach to this issue. Here is your CSS in its most recent iteration:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.exposegrid {
  width: 500px;
  display: flex;
  flex-flow: line wrapping;
  justify-content: spatially even;
  &:after {
    content: "";
    flex: none; /* disable flex grow/shrink */
    width: calc((100% - (100px * 4)) / 4); /* calculate border width */
  }
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

/* Add margin to last item in each line */
.exposegrid > *:nth-child(4n+4) {
  right margin: 0;
}

<!-- end snippet -->