I have an app that displays different divs and I want to style it so that as the size of the window changes, columns are added and taken away and the content is dynamically arranged within the columns. I'm using media query to add a column to the main container every 400px and the width of every div is 400px. However.when there are two columns and three divs the overflow ends up in the right most column. How do i make my columns fill from left to right?

```
@media (max-width: 1199px) and (min-width: 800px) {
  .main-container {
    column-count: 2;
    padding: 15px;
    margin: 15px;
  }

  .item {
    border: solid black 1px;
    width: 400px;
    -webkit-column-break-inside: avoid;
  }
}

<section class="main-container">

    <div class="item">
        <h2>Title</h2>
        <p>this is a paragrapgh</p>
    </div>

    <div class="item">
        <h2>Title</h2>
        <p>this is a paragrapgh</p>
    </div>

    <div class="item">
        <h2>Title</h2>
        <p>this is a paragrapgh</p>
    </div>

</section>

```