I am using CSS grid for some box items. This looks good and fine but however when I make the screen smaller when there are only 2 or 1 boxes in the container its to the left how would I go about making them always in the center?

```css
body {
  background-color: #8268EE; 
}

.item-container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: center;
  align-items: center;
}

.item {
  background-color: #BDD3FB;
  width: 200px;
  height: 200px;
}
```

```html
<div class='item-container'>
  <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 class='item'></div>
</div>
```