JQuery append skips content after spaces
<p>I am trying to dynamically append cards inside a <code>div</code>.</p>

<p>My code to do that is as follows:</p>

<pre><code>    $.getJSON(url, function(jsonresult2) {


        for (var i = 0; i &lt; 30; i++) {
            phototemp = link_to_photo;
            itemname = link_to_item_name;
            itemcategory = link_to_item_category;


            $("#populateexplore")
                .append('
                       &lt;div class="col-lg-3 col-md-4 col-sm-6" style="float:left"&gt;
                       &lt;div class="card"&gt;&lt;img src="' 
                       + phototemp 
                       + '" style="width:100%;height:200px;"&gt;&lt;div class="container"&gt; &lt;h4&gt; &lt;b&gt; ' 
                       + itemname 
                       + '&lt;/b&gt;&lt;/h4&gt;&lt;hr&gt;&lt;p&gt;Category:'
                       + itemcategory 
                       + '&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
        }
    }).error(function() { sweetAlert("Cannot find the place"); });
</code></pre>

<p>The <strong>css</strong> of the card <code>div</code> is </p>

<pre><code>.card {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     border-radius: 5px; /* 5px rounded corners */
     background-color: #CCC;
     margin-bottom: 10px;
}
</code></pre>

<p>The problem is that the output cads does not float on the left side and instead gives empty spaces on left </p>

<p><a href="https://i.imgur.com/ols6AVx.jpg" rel="nofollow noreferrer">https://i.imgur.com/ols6AVx.jpg</a> </p>

<p>Is there any way I can fill in the void spaces on the left side?</p>