删除Bootstrap 3选项卡之间的空间

Question

firstly here's the fiddle: http://jsfiddle.net/krish7878/a2f03jrg/

Nothing fancy going on, just the regular bootstrap 3 tabs with background color. There seems to be a 1px space on either side of each tab and I cannot remove it. I've tried 'margin,padding: 0px', 'float:left'.

Any help would be appreciated.

HTML Code:

  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#popular" role="tab" data-toggle="tab">Popular</a></li>
    <li><a href="#recent" role="tab" data-toggle="tab">Recent</a></li>
    <li><a href="#comments" role="tab" data-toggle="tab">Comments</a></li>
  </ul><!-- /.nav-tabs -->
  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane fade in active" id="popular">
        popular - some content will go in here
    </div><!-- /.tab-pane -->
    <div class="tab-pane fade" id="recent">
        Some Content Will obviously come here
    </div><!-- /.tab-pane -->
    <div class="tab-pane fade" id="comments">
        Some Content Will obviously come here
    </div><!-- /.tab-pane -->
  </div><!-- /.tab-content -->

CSS code:

ul.nav-tabs li.active a{
border-top: 3px solid #49c8ff;
border-radius: 2px;
}
ul.nav-tabs li.active:hover a{
    border-top: 3px solid #49c8ff;
}
ul.nav-tabs li a{
    background-color: #eee;
}

Answer 1

The margin around the links is coming from this rule in the bootstrap stylesheet:

.nav-tabs>li>a {
   margin-right: 2px;
}

You can override with something like:

ul.nav-tabs li a{
    background-color: #eee;
    margin-right: 0;
}

Updated fiddle: http://jsfiddle.net/a2f03jrg/1/