Remove artificial margin after inline-block wrap to be able to center the container

Question

I have a block with inline divs wrapping inside. I want to center that block inside it's container using margin auto (or any other ways). Unfortunately it doesn't work. There is a solution by using text-align center, but i don't want the inline-divs in the last line to be in the center.

or in other words: how to get rid of the yellow marked space?

There was a similar question 6 years ago that didn't get a good solution, I ask again because css has advanced since then

span{
  display:inline-block;
  width:150px;
  height:100px;
  background-color:red;
  margin:10px;
}
.inside{
  margin:auto;
  width:90%;
  background-color:blue;
} 
.outside{
  border:solid 1px black;
}

<div class="outside">
  <div class="inside">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
</div>

```