Find and remove the space between html elments - html

Question

I am trying to remove a space between 2 elements in my html page.
I set margin-left:0px; but it does not work.
Here is the code:
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-6 thumb">
<div class="thumbnail" href="#">
<img class="img-responsive" src="https://scontent-arn2-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13687120_1671928519797295_1730075489_n.jpg?ig_cache_key=MTMwOTc1OTU2NDk2NjUzNzE2NQ%3D%3D.2" alt="">
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-6 thumb">
<ul class="bullet-remover">
<li class="item">
<div class="media">
<div class="media-body">
<h3 class="media-heading"><strong>Luisa Martine</strong></h3>
😍😍😍🙌😌👌👏👏👏😏😏
</div>
</div>
</li>
</ul>
</div>
</div>
As you can see, there is a space between image and ul tag.
I have tried to remove the left margin with:
.bullet-remover{
list-style-type: none;
margin-left: 0px;
}
But it does not work?

Answer 1

I can see that you have some custom padding to your bullets. So one option is to cancel out the padding-left and padding-right of the ".thumb"
One more issue. please don't leave out the ".container" around your ".row". Those two are perfect & made for each other.
container adds left and right padding which will be cancelled by the rows, so there won't be any scrollbar in the page
Option 2:
if you are fine with the column gutter spaces,
Then your bullet remover should be as follows
.bullet-remover{
padding:0;
margin:0;
list-style:none;
}
Check the snippet
.thumb {
/*padding-left: 0 !important;
padding-right: 0 !important;*/
}
.bullet-remover
{
list-style:none;
padding:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-6 thumb">
<div class="thumbnail" href="#">
<img class="img-responsive" src="https://scontent-arn2-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13687120_1671928519797295_1730075489_n.jpg?ig_cache_key=MTMwOTc1OTU2NDk2NjUzNzE2NQ%3D%3D.2" alt="">
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-6 thumb">
<ul class="bullet-remover">
<li class="item">
<div class="media">
<div class="media-body">
<h3 class="media-heading"><strong>Luisa Martine</strong></h3>
😍😍😍🙌😌👌👏👏👏😏😏
</div>
</div>
</li>
</ul>
</div>
</div>
</div>