Remove extra space from a Bootstrap 4 Card

Question

I'm using the Card class from Bootstrap 4, but there's an extra right space I can't get rid off:

(Ignore the 'porno' thing, heh).

As you can see, there's extra right space.

I'm trying to get rid of it with this 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;
 }

HTML code (using Jekyll too):

<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>

It doesn't works.

Any help?

Solution 1

The width of the column element is determined by the col-type in CSS. This one has a width of 33.33%. The amount of pixels varies per breakpoint. Currently your column holds a card div. This card div is 80% of the column div. As it defaults to the left side, the remaining 20% appears on the right side. Adding margin: 0 auto; to the card CSS centers the div in its parent. Another solution would be to use a width of 100% (add width: 100% and remove width: 80%!important) on the card div, making it fill up the entire column.

Solution 2

Adding bootstrap class "no gutters" helped me remove that:

div class="row no-gutters"

Comments

[CodeZombie]

Please share your html code.

[tao]

Your question doesn't show any research effort. Also, negative padding values are illegal in HTML. You can use negative margins instead. However, that space is created by some CSS rule. It's better to disable the source than to apply additional code that reverts it. Do note that without a minimal reproducible example (live snippet) in the question itself, your question is a lot less useful to future users, hence greatly reducing your chances of getting (good) answers.

[lalit bhakuni]

share you html code

[Pragna]

Share your html code

[dawn]

@AndreiGheorghiu thanks for the observations. Will improve in future questions.

[dawn]

@karthik HTML code up!

[dawn]

@lalitbhakuni HTML code up!

[dawn]

@Pragya HTML code up!

[lalit bhakuni]

i things it's working i'v don't see any problem w3schools.com/code/tryit.asp?filename=FN09098T4E80

[dawn]

@lalitbhakuni well it might be some CSS I got. Will check.

[dawn]

I added more CSS rules I got in my project.

[lalit bhakuni]

you giving .card{ width: 80% !important; that's y the right said getting space remove 80% important w3schools.com/code/tryit.asp?filename=FN0A1A0DDWZF