미디어 쿼리를 사용하여 컨테이너를 중앙에 배치하고 하위 요소를 왼쪽 정렬하는 방법은 무엇입니까?

<code class="css">/* Set parent container to be centered */
.outer {
  text-align: center;
}

/* Set inner div to be inline-block for wrapping child elements */
.inner {
  font-size: 0; /* To prevent inline gaps between divs */
  display: inline-block;
  text-align: left;
}

/* Define the individual image elements */
.item {
  font-size: 16px; /* Reset font size */
  display: inline-block;
  margin: 5px; /* Gutter */
}

/* Image alignment within item divs */
.item img {
  vertical-align: top;
}

/* Media queries for different viewport sizes */
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
  .inner {
    width: 440px; /* (100+5+5)x4 */
  }
}

@media (max-width: 441px) {
  .inner {
    width: 330px;
  }
}

@media (max-width: 331px) {
  .inner {
    width: 220px;
  }
}

@media (max-width: 221px) {
  .inner {
    width: 110px;
  }
}</code>