title: Bootstrap .nav-tabs border-bottom won't go away
body: <p>Okay so I'm using the Bootstrap's nav panels and I have them fixed to the top along with an image bar.  The problem is that I cannot remove the bottom-border from it no matter what I try.  Here is the code as it is:</p>
  
  <pre><code>.header-wrapper {
  font-family: 'Oswald', sans-serif;
  }
  .top {
  background-color: #2960f7;
  margin: 0;
  padding: 5em 0 4em 0;
  width: 100%;
  position: fixed;
  z-index: 999;
  }
  
  .top h1 {
      text-transform: uppercase;
      margin-top: auto;
      margin-bottom: auto;
      text-align: center;
      color: #fff;
  }
  
  .nav-tabs {
  border-bottom: none;
  position: fixed;
  top: 124px;
  background-color: #2960f7;
  color: #fff;
  border-color: #fff;
  z-index: 1000;
  }
  
  .nav-tabs .active {
      color: #2960f7;
  }
  
  .nav-tabs li a:hover {
      background-color: #fff;
      color: #2960f7;
  }
  
  .nav-tabs li, .nav-tabs li a {
      color: #fff;
  }
  </code></pre>
  
  <p>And the HTML of the tabs and header:</p>
  
  <pre><code>&lt;div class="header-wrapper"&gt;
     &lt;div class="top"&gt;
          &lt;h1&gt;Title&lt;/h1&gt;
      &lt;/div&gt;        
      &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="skillset.html"&gt;Skillset&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="history.html"&gt;Work History&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I look at it I see the line in the CSS element in Chrome that shows the <code>.nav-tabs {border-bottom: 1px solid #ddd}</code>.</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/ghstet23/3/" rel="nofollow">https://jsfiddle.net/ghstet23/3/</a></p>
  
  <p>The long and the short, how can I get that bottom border to go away if setting <code>.nav-tabs</code> to <code>bottom-border: none;</code> won't work?</p>