Cards give weird gap shadow underneath

<!--Card-->
<mdb-card>
  <!--Card image-->
  <div class="view overlay waves-light" mdbWavesEffect>
    <mdb-card-img src="https://mdbcdn.b-cdn.net/img/Photos/Others/food.jpg"></mdb-card-img>
    <a
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>
  <!--/.Card image-->
  <!--Button-->
  <a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3 waves-light" mdbWavesEffect>
    <i class="fa fa-chevron-right pl-1 waves-light" mdbWavesEffect></i>
  </a>
  <!--Card content-->
  <mdb-card-body>
    <!--Title-->
    <mdb-card-title>
      <h4>Card title</h4>
    </mdb-card-title>
    <hr>
    <!--Text-->
    <p class="font-small grey-dark-text mb-0">Some quick example text to build on the card title and make up
      the bulk of the card's content.</p>
  </mdb-card-body>
  <!--/.Card content-->
  <!-- Card footer -->
  <mdb-card-footer class="mdb-color lighten-3 text-center">
    <ul class="list-unstyled list-inline font-small mt-3">
      <li class="list-inline-item pr-2 white-text">
        <i class="fa fa-clock-o pr-1"></i>05/10/2015</li>
      <li class="list-inline-item pr-2">
        <a href="#" class="white-text">
          <i class="fa fa-comments-o pr-1"></i>12</a>
      </li>
      <li class="list-inline-item pr-2">
        <a href="#" class="white-text">
          <i class="fa fa-facebook pr-1"> </i>21</a>
      </li>
      <li class="list-inline-item">
        <a href="#" class="white-text">
          <i class="fa fa-twitter pr-1"> </i>5</a>
      </li>
    </ul>
  </mdb-card-footer>
  <!-- Crd footer -->
</mdb-card>
<!--/.Card-->