links jump out of navigation when resized (responsive)

Question

I have two problems with my navigation in twitter bootstrap.

1. 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"><a href="index.html">Home</a></li>
        <li class="span4"><a href="forschung.html">Forschung</a></li>
        <li class="span4"><a href="fahrzeug.html">Fahrzeug</a></li>
        <li class="span4"><a href="team.html">Team</a></li>
        <li class="span4"><a href="presse.html">Presse</a></li>
        <li class="span4"><a href="ziele.html">Ziele</a></li>
        <li class="span4"><a href="karte.html">Karte</a></li>
        <li class="span4"><a href="jobs.html">Jobs</a></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="" />
                <a href="fahrzeug.html"><div class="carousel-caption"><h1>Mercedes Benz</h1></div></a>
            </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.