Prevent outflow from a CSS grid

Question

When I resize my browser's width to look like a mobile device, the boxes starts to outflow from the div, over the one below. I made the boxes' div blue, so you can see it clearly.

https://i.stack.imgur.com/NE92T.jpg

https://i.stack.imgur.com/irRpr.jpg

body {
  background-color: #ffeead;
  margin: 5%;
}

.container {
  background-color: blue;
  display: grid;
  grid-gap: 10%;
  grid-template-columns: repeat(auto-fill, 350px);
  grid-auto-rows: 400px;
  justify-content: center;
}

.in {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #ffeead;
}

<div class="container">
  <div class="in">1</div>
  <div class="in">2</div>
  <div class="in">3</div>
</div>