Bootstrap navigation not aligned with content
twitter-bootstrap
Solution
Your `navbar` DIV needs a nested `container` DIV for it to align with your other content.
Check out this example.
It uses the following source:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> <!-- You need this DIV for alignment -->
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<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>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="container">
<!-- Main content goes here -->
</div>
</body>
Problem
Why is the content not aligned with the brand using Bootstrap 3.0.0? How can I get these aligned? Here is my HTML: ``` <!DOCTYPE html> <html> <head> <title>Title</title> <meta name="viewport" content="width=device-width initial-scale=1.0"> <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/app.css" rel="stylesheet"> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <span class="navbar-brand">Brand</span> </div> </div> </div> <div id="main-region" class="container"> <p>Content</p> </div> <script data-main="js/main" src="bower_components/requirejs/require.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> </body> </html> ``` Here is app.css: ``` body { padding-top: 60px; } ```