Using the Card class from Bootstrap 4, I'm struggling with an extra space on the right side:
https://i.sstatic.net/5qb8y.png
(Please ignore the 'porno' thing, haha).
You can clearly see the extra space on the right.
I've been attempting to remove it with the following code:
.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;
}
Here is the relevant HTML code (also using 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>
Despite my efforts, this solution doesn't seem to work.
Any advice or assistance would be greatly appreciated!