Child div width exceeding parent's div width

Child element's width is exceeding its parent div's width. I assume this must have been caused because I'm setting the position to be fixed, but I don't know what to replace it with. This div is a navigation bar that should be fixed to the top of the window. When I get rid of position:fixed, the size is fit to the parent div nicely. However, the nav bar is no longer fixed to the top. How do I solve this problem?

reference: page

CSS:

.fixed_pos {
    position: fixed;
}

View:

<div class="container-fluid">
  <div class="row-fluid">
      <div class="span11 fixed_pos">
        <ul class="nav nav-tabs">
        </ul>
      </div>
  </div>
</div>

Thanks a lot in advance!

Solution

For a fixed nav you usually need it on the outer most layer or in its own absolute div. It's fairly straight forward. Here's a fiddle for you to look at and adjust. Still not sure what you really trying to make with all those divs, but this is a basic setup that can be easily adapted.

http://jsfiddle.net/hakarune/FMmEc/

The HTML:

<div id="wrap">
<nav>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</nav>

   <div id="header">
        <h1>CSS Newbie: Super Simple Horizontal Navigation Bar</h1>
    </div>

   <div id="content">
      <p> Basic Fixed Nav at Top</p>

   </div>
</div>

The CSS

nav {
    width: 100%;
    float: left;
    margin: 0 0 15px 0;
    padding: 0px;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc; 
    position:fixed;
    top:0px;
}
nav li {float: left; }
nav li a {
    display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      border-right: 1px solid #ccc; }
nav li a:hover {
      color: #c00;
      background-color: #fff; }
   /* End navigation bar styling. */

   /* This is just styling for this specific page. */
body {
      background-color: #555; 
      font: small/1.3 Arial, Helvetica, sans-serif; }
#wrap {
      width: 750px;
      margin: 0 auto;
      background-color: #fff; }
h1 {
      font-size: 1.5em;
      padding: 1em 8px;
      color: #333;
      background-color: #069;
      margin: 30px auto 0;
}
#content {
      padding: 0 50px 50px; }