links jump out of navigation when resized (responsive) - html

Question

I have two problems with my navigation in twitter bootstrap.
the links jump out of the navigation when I re-size the browser window
and 2. the collapsed navigation is hidden behind the carousel.
I want all my links in the navigation to have the same width, because they get a border in mouse-over but because of that they jump out of the navigation and are hidden behind the carousel/slider when re-sized.
They collapse just fine when re-sized to 768px but everything above that jumps out of navigation. And the other thing is that when the navigation is collapsed it is half hidden behind the carousel/slider when opened.
<nav class="navbar navbar-inverse" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Test</a>
</div>
<div class="nav-collapse collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="span4">Home</li>
<li class="span4">Forschung</li>
<li class="span4">Fahrzeug</li>
<li class="span4">Team</li>
<li class="span4">Presse</li>
<li class="span4">Ziele</li>
<li class="span4">Karte</li>
<li class="span4">Jobs</li>
</ul>
</div>
</nav>
<div class="container">
<div id="this-carousel-id" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#this-carousel-id" data-slide-to="0" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption"><h1>Mercedes Benz</h1></div>
</div>
</div>
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
and this is the css
.navbar {
height: 100px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding-right: 5%;
background-color: #000000 !important;
box-sizing: border-box;
}
.navbar-inverse .navbar-nav > li > a { color: #a2a2a2 !important }
.nav a:link,
a:visited {
line-height: 4em;
display: block;
height: 100px;
width: 120px;
text-align: center;
text-decoration: none;
}
.nav a:after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: #062d67;
content: '';
opacity: 0;
-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
transition: height 0.3s, opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.nav a:hover,
a:focus,
a:active {
height: 81px;
color: #ffffff !important;
background-color: #0d0d0d !important;
}
.nav a:hover:after,
.nav a:focus:after,
.nav a:active:after {
height: 18px;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
Can anyone please point out what I did wrong?

Answer 1

You can't have 8 span4 elements in one row. the total sum of N in spanN must be 12 or below.
you can use span1in your case or no class on for <li> (list item) elements at all.