Kamyar Parastesh Kamyar Parastesh - 3 months ago 13
CSS Question

Find and remove the space between html elments

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>

Answer

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