Bootstrap .nav-tabs border-bottom won't go away - css

Question

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:
.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;
}
And the HTML of the tabs and header:
<div class="header-wrapper">
<div class="top">
<h1>Title</h1>
</div>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Skillset</li>
<li>Work History</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
When I look at it I see the line in the CSS element in Chrome that shows the .nav-tabs {border-bottom: 1px solid #ddd}.
JSFiddle: https://jsfiddle.net/ghstet23/3/
The long and the short, how can I get that bottom border to go away if setting .nav-tabs to bottom-border: none; won't work?

Answer 1

I had to add the following code to the head
<style>
.nav-tabs {
border-bottom: none;
}
</style>

Answer 2

If by bottom border you mean the underline under your nav options you can use text-decoration: none; like so in your css:
.nav-tabs li, .nav-tabs li a {
color: #fff;
text-decoration: none; /* Add this */
}

Answer 3

On the bootstrap.min.css there is a border set on hover
.nav-tabs>li>a:hover {
border-color: #eee #eee #ddd;
}
On your local stylesheet after you load bootstrap add this to override the bottom border
.nav-tabs>li>a:hover {
border-bottom-color:#fff;
}
To remove the white border at the bottom
.nav-tabs { border-bottom: none; }
Check it here
JSFiddle

Answer 4

Remember, styles are inherited. Start butchering it from the top-parent down to find your anomalies.
For example, if you have a div inside a div inside a wrapper div, and you apply a border to the wrapper, both inner divs will get borders also.
In that example, if you are like "hey wtf, I only wanted the parent to have a border." Then, you would add "border: none;" to BOTH inner divs.
A person would also be interested in:
http://www.w3schools.com/cssref/sel_element_gt.asp
eg:
div > div > * {
border: none;
}
Select all child elements recursively in CSS