Need to remove large whitespace area
<p>I've been searching for hours and found a lot of info but not exactly what i'm looking for.</p>

<p><a href="http://jsfiddle.net/b4zdd51f" rel="nofollow noreferrer">I'm using this exact code in wordpress</a> </p>

<p>I'm also using infinite scroll and when I scroll the second page displays like this: </p>

<p><a href="https://i.stack.imgur.com/Wloj2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wloj2.png" alt="enter image description here"></a></p>

<p>My problem: The huge chunk of white space. I want that gone and have posts be inline with the first page posts. </p>

<p>HTML:</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;div class="container"&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>body {
    background: white;
    padding: 5px;
    margin: 0;
}
.container {
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-width: 150px;
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
}
.item {
    display: inline-block; 
    background: black;
    margin: 0 0 5px 0;
    padding: 10px;
    color: white;
}
</code></pre>