Как уменьшить размер области сетки, чтобы она не выходила за пределы тела?

Question

По сути, мои области сетки становятся больше, чем тело, когда я сжимаю браузер, а я этого не хочу. Может быть, как-нибудь сжать области сетки, когда я сжимаю браузер, чтобы они не выходили за пределы тела.

body {
  background-repeat: none;
  background-size: cover;
  width: 75%;
  margin: 0 auto 0 auto;
  padding: 0px;
  border: none;
  overflow: auto;
  box-sizing: border-box;
}

main {
  margin-top: 0rem;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "m1 . side1" "m2 m3 side2";
  grid-gap: 2.5em;
  justify-content: center;
}

.main-content1 {
  grid-area: m1;
  padding: 20px;
}

<main>
  <div class="main-content1">


  </div>
  <div class=main-content2>

  </div>
  <div class=main-content3>

  </div>
  <div class="side-content1">

    <iframe></iframe>



  </div>
  <div class="side-content2">

    <iframe></iframe>
  </div>
</main>