Why is the col-md-4 column starting from the right and leaving a blank space on next line - css

Question

I am displaying a list of search results. I am using col-md-4 from bootstrap to display 3 results per row - a bit like 3 cards. However when it moves to the next row it starts from the right and then the next item shows up only on the next one left... basically jumping a column.
Following code to be repeated as many time as needed. End goal is to display results like a grid.
<div class="outer-listings-container row-space-8">
<div class="row row-condensed listings-container">
<!-- PART TO REPEAT -->
<div class="col-md-4 row-space-1" data-id="36">
<div class="result">
<div class="panel-image listing-img">
<div id="36" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<a class="center-block" href="#">
<div class="center-block">
<img class="img-responsive center-block" src="#"> </div>
</a>
</div>
<div class="item">
<a class="" href="#">
<div class="center-block">
<img class="img-responsive center-block" src="#">
</div>
</a>
</div>
</div>
<div>
<a class="left carousel-control height-test" id="36" href="#36" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div>
<a class="right carousel-control height-test" id="36" href="#36" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="panel-overlay-bottom-left panel-overlay-label panel-overlay-listing-label">
<div>
<sup class="h6">€</sup>
<span class="h3">456</span>
<sup class="h6">EUR</sup>
<span class="h6">/session of 2 hours</span>
</div>
</div>
</div>
<div class="panel-body panel-body-result">
<h4>
<div class="row">
<div class="col-xs-2">
<img src="#" class="avatar-sm" alt="Banana"> </div>
<div class="col-xs-10">
Banana R
<br>
<small>Banana R</small>
</div>
</div>
</h4>
<span class="stars2"><span style="width: 0px;"></span></span>
<span><b class="review_score">0</b> (0 reviews)</span>
<p>blabla</p>
<p>more blabla </p>
</div>
</div>
</div>
<!-- END REPEAT -->
</div>
</div>
Problem can be seen on the following page: https://gokyma.com/search?location=Paris%2C+France&country=FR&city=Paris&state=IDF&stype=5&selected_date=&selected_time=&_token=ZHXfiseRlAgE3fLY0f1ywr7qYzj9eFxGkSZ2SFIS

Answer 1

Well, your jsfiddle code is not really representative of the issue, but I guess one solution could be adding <div class="row"></div> for each series of 3 col-md-4 that you have in each line. So, the snippet would look something like this;
<row> <col-md-4> <col-md-4> <col-md-4> </row>
Remember, a row can't contain more than 12 columns.... that's another thing to take into consideration...