Bootstrap 3 navigation bar right margin is not supposed to be -15px

css, html, twitter-bootstrap-3

Solution

Use .container-fluid as of 3.1.1.

The structure is not correct. .navbar-right goes on the .collapse container not on the ul.

SAMPLE: http://jsbin.com/eQIROsE/2/edit

    <div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header">
  <a class="navbar-brand" href="#">Project name</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button> 
  </div>
    <div class="navbar-collapse collapse navbar-right">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
        </ul>
      </div>
      <!--/.navbar-collapse -->
  </div>

Problem

In my web page I have a Bootstrap 3 navbar: ``` <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Teachlab</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><%= link_to "Home", '#' %></li> <li><%= link_to "Help", '#' %></li> <li><%= link_to "Sign in", '#' %></li> </ul> </div> </nav> <div class="container"> <%= yield %> </div> </body> ``` The problem is that navigation is to close to the edge of the screen. If I remove navbar-fixed-top from the navigation bar, it's working as I want. Any hints?

Original source