bootstrapでカードを用いたコーディング

Question

先週から始めた初心者です。
XDからコーディングを行なっています。

bootstrapのcard group を使っています。
３つ並んだリンク付きカードに31pxごとの余白を作りたいのですが上手くいきません。
どなたかご教授頂けないでしょうか。

<div class="card-group">
  <div class="card"><!--  https://eclair.blog/make-card-group-with-html-and-css/  -->
    <a href="..." class="link-dark">
    <img src="..." class="card-img-top" alt="">
    <div class="card-body">
      <h5 class="card-title"></p>
      <p class="card-text"><small class="text-muted"></small></p>
    </div>
   </a>
  </div>
  <div class="card">
    <a href="..." class="link-dark">
    <img src="..." class="card-img-top" alt="">
    <div class="card-body">
      <h5 class="card-title"><span></span></h5>
      <p class="card-text"></p>
      <p class="card-text"><small class="text-muted"></small></p>
    </div>
    </a>
  </div>
  <div class="card">
    <a href="..." class="link-dark">
    <img src="..." class="card-img-top" alt="">
    <div class="card-body">
      <h5 class="card-title"></h5>
      <p class="card-text"></p>
      <p class="card-text"><small class="text-muted"></small></p>
    </div>
  </a>
  </div>
</div>



a{
  text-decoration: none;
}

.card{
  float: left;
  width: 362px;
  height: 372px;
  background-color: #ffffff;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.14);
  margin: : 31px;
  display: flex;
  justify-content: center;
}

.card{
  width: calc((100% - 31px * 2) / 3);
}

.card{
  margin: 31px；
}

.card-body{
  width: 362px;
  height: 180px;
  /* background: url(...); */
}