title: Remove extra space from a Bootstrap 4 Card
body: <p>I'm using the <strong>Card class</strong> from <strong>Bootstrap 4</strong>, but there's an extra right space I can't get rid off:</p>
  
  <p><a href="https://i.stack.imgur.com/5qb8y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5qb8y.png" alt="enter image description here"></a></p>
  
  <p>(Ignore the 'porno' thing, heh).</p>
  
  <p>As you can see, there's extra right space.</p>
  
  <p>I'm trying to get rid of it with this code:</p>
  
  <pre><code> .card{
       width: 80% !important;
       background-color: black;
  
  
   }
  
  
   .card-block{
      color: white !important;
  
   }
  
   #card-div{
       padding-bottom: 10px;
       padding-right: -10px !important;
  
   }
  
   #card-div &gt; a{
       text-decoration: none;
   }
  </code></pre>
  
  <p>HTML code (using Jekyll too):</p>
  
  <pre><code>&lt;div class="col-sm-8" id="main-content"&gt;
  
    &lt;div class="row"&gt;
  
      {% for post in site.posts%}
      &lt;div class="col-sm-4" id="card-div"&gt;
        &lt;a target="_blank" href=" {{post.url}} "&gt;
          &lt;div class="card"&gt;
            &lt;img class="card-img-top" src="../media/logo-prueba.jpg"&gt;
            &lt;div class="card-block"&gt;
              &lt;h5 class="card-title text-center"&gt;{{ post.title }}&lt;/h5&gt;
              &lt;p class="card-text"&gt;{{ post.category }}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      {% endfor %}
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>It doesn't works.</p>
  
  <p>Any help?</p>