Remove margin-right when flex-wrap is wraping elements with pure CSS

Question

I've got a wrapper and some items within. I would like to place two items next to other in each row. I used flexbox to solve this.

My wrapper has the property flex-wrap: wrap; and my items have the property: flex: 0 0 45%;. So every of my items use 50% of the row (included the margins). I use margin to make a gap on the right side and a gap on the bottom between the items. This works almost as I expected.

Now my question: Is there a way to ignore the margin-right on the second item in each row (where it wraps), so the second item is also aligned to the right side of the wrapper same as the left item is. At the moment, there is also a gap at the end of the row because of the margin-right. I would like to remove this gap. Is this possible with pure CSS? last-child just removes the margin-right on the last item, but this is clear why. Is there a way to remove it on the end of the row, where the items wrap? Hope this is clear enough.

Below my snippet:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid black;
  width: 768px;
}

.wrapper__item {
  flex: 0 0 45%;
  width: 330px;
  height: 160px;
  margin: 0 36px 18px 0;
  background-color: lightcoral;
}

<div class="wrapper">
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
</div>

Here is also a screenshot where I would like to remove the margin-right (see arrows):

Answer 1

  .wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: 1px solid black;
    width: 768px;
  }

  .wrapper__item {
    flex: 1 0 45%;
    /*   width: 330px; */
    height: 160px;
    margin: 0 36px 18px 0;
    background-color: lightcoral;
  }

  .wrapper div:nth-child(2n) {
    margin-right: 0;
  }

  <div class="wrapper">
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
</div>

Remove width: 330px; in .wrapper__item selector.

Modify flex: 0 0 45%; to flex: 1 0 45%; in .wrapper__item selector.

Add css code:

.wrapper div:nth-child(2n) {
    margin-right: 0;
}

Hope helpful :).