Eu tenho o seguinte requisito.

A largura dos pais de cor verde varia de acordo com a largura do dispositivo. Eu preciso de todas as caixas para estar no centro dos pais.

Já tentei o seguinte, mas não me ajudou.

Julgamento 1
Parent {text-align:center} box {display:inline-block}.

Isso resultou na seguinte saída

Julgamento 2
Parent {text-align:center} box{float:left}.

Isso resultou na seguinte saída

Teste 3
Parent {display:flex} box -> justify-around & justify-between também não funcionou.

.parent {
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Qualquer ajuda sobre isso será apreciada.