bootstrap clearfix not working. Holes in layout chrome

Hey guys I created my own custom cards in bootstrap 3 as I need to support rather old browsers and cant yet upgrade to bootstrap four. The cards have a video in them. a title and a button. Heres the css for the cards.

.card{width: 100%; margin-bottom: 30px; box-shadow: 0 0 5px; padding: 15px; background-color: white;}
        .card video{width:100%;}
        .card-title{font-weight: bold;}

I than have this templates page with a simple col-md-4 layout. And I use vuejs to loop through an array I get from the database

<style>
    .categoryButtonSelected{background-color: #1c71b9 !important; color: white !important;}
    .headertitle{text-align: center; margin: 0; padding: 0;}
</style>
<?php
require_once('database.php');

if ($result = $mysqli->query("SELECT t.*, GROUP_CONCAT(c.category) categories, GROUP_CONCAT(k.keyword) keywords FROM dataclayTemplates t LEFT JOIN dataclayCategoryLink cl JOIN dataclayCategories c ON cl.categoryId=c.id ON t.id=cl.templateId LEFT JOIN dataclayKeywordLink kl JOIN dataclayKeywords k ON kl.keywordId=k.id ON t.id=kl.templateId GROUP BY t.id"))
{
  while($row = $result->fetch_array(MYSQL_ASSOC)) {
    if($row["categories"] == null) {
      $row["categoryArray"] = [];
    } else {
      $row["categoryArray"] = array_unique(explode(",",$row["categories"]));
    }
    unset($row["categories"]);
    if($row["keywords"] == null) {
      $row["keywordArray"] = [];
    } else {
      $row["keywordArray"] = array_unique(explode(",",$row["keywords"]));
    }
    unset($row["keywords"]);
    $templateArray[] = $row;
  }
}

$result->close();

$categoryArray = array();

if ($result = $mysqli->query("SELECT category FROM creative_engine.dataclayCategories;"))
{
  while($row = $result->fetch_array(MYSQL_ASSOC)) {
    array_push($categoryArray, $row['category']);
  }
}

$result->close();

$keywordArray = array();

if ($result = $mysqli->query("SELECT keyword FROM creative_engine.dataclayKeywords;"))
{
  while($row = $result->fetch_array(MYSQL_ASSOC)) {
    array_push($keywordArray, $row['keyword']);
  }
}

$result->close();

$mysqli->close();

include('header.php');

?>
 <div v-cloak id="templates" class="container">
<div class="row"><h1 class="headertitle">Creative Engine Templates</h1></div>
    <div class="row">
      <div v-cloak v-bind:key="template.itemId + '_' + index" v-for="(template, index) in searchResults" class="col-md-4">
        <div class="card">
            <video muted :src="'CreativeEngine/'+template.itemId+'/'+template.thumbName+'.mp4'" controls preload="none" controlsList="nodownload nofullscreen" :poster="'CreativeEngine/'+template.itemId+'/'+template.thumbName+'.jpg'" loop="loop"></video>
            <div class="card-body">

                <p class="card-title">{{template.itemName}}</p><!--end card-title-->
                <p v-show="displaycount==0" class="card-text">Please create a display to customize</p><!--end user has no display card-text-->
                <p v-show="displaycount>0" class="card-text">Custom Text, Custom Colors, Upload Logo</p><!--end user has display card text-->
                <p class="card-text">{{template.renderTime}} minutes</p>
                <a href="#" v-show="loggedin==1 && displaycount>0" class="btn btn-primary btn-block">Customize</a><!--logged in and has display button-->
                <a href="#" v-show="loggedin==0" class="btn btn-primary btn-block" disabled>Customize</a><!--not logged in button-->
                 <a href="getCustomer.php?showAddDisplayForm=1" v-show="loggedin==1 && displaycount==0" class="btn btn-primary btn-block">Create A Display</a>
            </div><!--end card-body-->
        </div><!--end card-->
      </div><!-- end col-md-4-->
      </div><!--end row-->

</div><!--end templates app-->

I've tried clearfixes and just about everything I can think of but I keep getting a whole on the sixth card in my layout like this (this is only happening on chrome while edge and firefox work fine Picture demenstrating problem

If I'm doing this wrong or if anyone has any ideas let me know

/*Cards*/
.card{width: 100%; margin-bottom: 30px; box-shadow: 0 0 5px; padding: 15px; background-color: white;}
.card video{width:100%;}
.card-title{font-weight: bold;}

@media only screen and (max-width : 3840px) {
.card video {height: 150px;}
}

@media only screen and (max-width : 990px) {
.card video {height: auto;}
}

in order to fix the problem I had to put media queries in and set a height and than set it to auto once it got to a certain screen size