У меня есть следующее требование.

Ширина родительского зеленого цвета будет варьироваться в зависимости от ширины устройства. Мне нужно, чтобы все ящики были в центре родителя.

Я уже пробовал следующие вещи, но это не помогло мне.

Испытание 1
Parent {text-align:center} box {display:inline-block}.

Это привело к следующему выводу

Испытание 2
Parent {text-align:center} box{float:left}.

Это привело к следующему выводу

Испытание 3
Parent {display:flex} box -> justify-around & justify-between тоже не сработало.

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

Любая помощь в этом будет оценена.