Simple Bootstrap site - the navigation bar keeps covering my main content. Any idea why?

Question

Here is the HTML.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
<div class="container-fluid">
  <div class="row-fluid">
    <nav class="navbar navbar-inverse">
      <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> </a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="#">HOME</a> </li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">WORK</a></li>
            <li><a href="#">RESUME</a></li>
            <li><a href="#">CONTACT</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="headline">
      <header class="span8">
        <h1>Headline goes here</h1>
      </header>
    </div>
  </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="js/bootstrap.min.js"></script>
</body>
</html>

In the CSS, I have nothing about the positioning changed or anything—just colors and spacing and whatnot. I have the .navbar .nav > ul property set to display:box; could that be affecting it?

Let me know if you need more info

Here's the jsfiddle, without bootstrap files: http://jsfiddle.net/6PRhf

Would it be possible for you to make a jsfiddle? Also in the mean time, check to see if all your CSS paths are correct. — ProEvilz, Aug 20 '13 at 02:13
I loaded your code and it seems to be working for me (I didn't change anything, just downloaded the most recent bootstrap files), the "Headline goes here" is below the nav and when you resize (make the browser width smaller) and open the menu it pushes the content down as well. Are you sure you have all the bootstrap files in the right directories based on your src? — StickMaNX, Aug 20 '13 at 02:23
Here it is... I didn't know how to also attach the bootstrap CSS files so it's not going to look exactly how it should.. http://jsfiddle.net/6PRhf/ — katgarcia, Aug 20 '13 at 02:29
Thanks @StickMaNX, I think the problem may be lying in my pile of CSS but I'm not quite sure where... — katgarcia, Aug 20 '13 at 02:30
It looks quite distorted based on the css in the jsfiddle, what were you trying to achieve? — StickMaNX, Aug 20 '13 at 02:43
@StickMaNX all I wanted was to center and evenly space out the navigation links and that's how it ended up... :( — katgarcia, Aug 20 '13 at 02:45

score 0 · Accepted Answer · edited May 23 '17 at 10:31

Using the following styles will space out the nav bar items, depending on how you want some styles to look you can customize it. But this should be close to what you want hopefully.

CSS File

/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
}

.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .75);
    border-right: 1px solid rgba(0, 0, 0, .1);
}

.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

Simple Bootstrap site - the navigation bar keeps covering my main content. Any idea why?

2 Answers2