Удалите лишнее пространство с карты Bootstrap 4

Я использую класс карты из Bootstrap 4 , но есть лишнее правое пространство, от которого не могу избавиться:

( Не обращайте внимания на « порно » вещь , хех ) .

Как видите, есть лишнее нужное место.

Я пытаюсь избавиться от этого с помощью этого кода:

 .card{
     width: 80% !important;
     background-color: black;


 }


 .card-block{
    color: white !important;

 }

 #card-div{
     padding-bottom: 10px;
     padding-right: -10px !important;

 }

 #card-div > a{
     text-decoration: none;
 }

HTML-код (тоже с использованием Jekyll):

<div class="col-sm-8" id="main-content">

  <div class="row">

    {% for post in site.posts%}
    <div class="col-sm-4" id="card-div">
      <a target="_blank" href=" {{post.url}} ">
        <div class="card">
          <img class="card-img-top" src="../media/logo-prueba.jpg">
          <div class="card-block">
            <h5 class="card-title text-center">{{ post.title }}</h5>
            <p class="card-text">{{ post.category }}</p>
          </div>
        </div>
      </a>
    </div>
    {% endfor %}

  </div>

</div>

Не работает.

Любая помощь?