title: Removing space between Bootstrap 3 tabs
body: <p>firstly here's the fiddle: <a href="http://jsfiddle.net/krish7878/a2f03jrg/" rel="nofollow">http://jsfiddle.net/krish7878/a2f03jrg/</a></p>
  
  <p>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'. </p>
  
  <p>Any help would be appreciated. </p>
  
  <p>HTML Code: </p>
  
  <pre><code>  &lt;ul class="nav nav-tabs" role="tablist"&gt;
      &lt;li class="active"&gt;&lt;a href="#popular" role="tab" data-toggle="tab"&gt;Popular&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#recent" role="tab" data-toggle="tab"&gt;Recent&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#comments" role="tab" data-toggle="tab"&gt;Comments&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;&lt;!-- /.nav-tabs --&gt;
    &lt;!-- Tab panes --&gt;
    &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane fade in active" id="popular"&gt;
          popular - some content will go in here
      &lt;/div&gt;&lt;!-- /.tab-pane --&gt;
      &lt;div class="tab-pane fade" id="recent"&gt;
          Some Content Will obviously come here
      &lt;/div&gt;&lt;!-- /.tab-pane --&gt;
      &lt;div class="tab-pane fade" id="comments"&gt;
          Some Content Will obviously come here
      &lt;/div&gt;&lt;!-- /.tab-pane --&gt;
    &lt;/div&gt;&lt;!-- /.tab-content --&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><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;
  }
  </code></pre>