Bootstrap grid resizes if there is only one result in my for each

Below is a screenshot of my bootstrap for each. This is dynamic with ajax so depending on what I filter. In this case there is only one result.

I an odd reason that I still have no clue why, the bootstrap grid is smaller if there is only one result.

Using the browser dev tools, I added another col-md-4 to see what will happen if there is more than one result: (this is exactly the same as filtering with multiple results)

here is my for each:

 echo'<div id="pcontent"><div class="row">';
 foreach($result as $res){
     echo'<div class="col-md-4 mb-3">
            <img id="news-list-img" src="" class="mb-3" alt="news banner">
            <p id="news-category">'.$res->category.'</p>
            <a id="news-link" href=""><h2 id="news-title">'.$res->title.'</h2></a><hr>
            <div class="row mt-1">
                <div class="col-md-6">
                    <p id="news-date" class="float-left">'.$res->date.'</p>
                </div>
                <div class="col-md-6">
                    <a id="readmore-link" href=""><p id="read-more">READ MORE</p></a>
                </div>
            </div>
          </div>'; }

 echo'</div>'.$paginationcontent.'</div>';

I am not sure if my mistake is in the row or the for each, any advice would be appreciated.