<div class="wrapper">
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</div>

body {
  margin: 0;
}

section {
  margin: auto; /* center the container relative to the page */
  display: flex;
  flex-wrap: wrap; /* wrap to a new row as needed */
  max-width: 1200px;
}

section > div {
  background: red;
  width: 340px;
  height: 120px;
  margin: 30px;
}

/* adjust the section width depending on the number of columns. This ensures that the container always remains centered relative to the page, but our rows still start at flex-start! */

/* if that's confusing to you, comment out these @media queries to see what happens. */
@media (max-width: 1199px) {
  section {
    max-width: 800px;
  }
}

@media (max-width: 799px) {
  section {
    max-width: 400px;
  }
}