Tengo el siguiente requisito.

El ancho principal de color verde variará según el ancho del dispositivo. Necesito todas las cajas para estar en el centro de los padres.

Ya he probado las siguientes cosas, pero no me ayudó.

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

Esto dio como resultado el siguiente resultado

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

Esto dio como resultado el siguiente resultado

Prueba 3
Parent {display:flex} box -> justify-around & justify-between Tampoco funcionó.

.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>

Cualquier ayuda en esto será apreciada.