CSS Bootstrap - Align Navbar 'Icons' with edge of jumbotron

Question

I am trying to align the selections in the navbar with the edges of the jumbotron, so that the rapidcodes logo aligns with the edge of the grey box in 'Newest Additions' and the 'login' button aligns with the right edge of the grey box.

See screenshot of current page:

Code:

 td { text-align: left; vertical-align: central; padding: 4px; } .products { display: inline-block; margin: 15px; } 

 <nav class="navbar navbar-default" > <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="http://www.rapidcodes.co.uk">Home</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Games</a></li> <li><a href="#">Memberships</a></li> <li><a href="#">Gift Cards</a></li> </ul> </li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Games</a></li> <li><a href="#">Memberships</a></li> <li><a href="#">Gift Cards</a></li> </ul> </li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Games</a></li> <li><a href="#">Time Cards</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> 

Answer 1

Your content probably has a container .container . Also wrap your navbar with this.

Answer 2

Try packing your code inside the external div with the class of 'container'.

 <div class="container"><!--Pack your code inside the container--> <nav class="navbar navbar-default" > <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="http://www.rapidcodes.co.uk">Home</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Games</a></li> <li><a href="#">Memberships</a></li> <li><a href="#">Gift Cards</a></li> </ul> </li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Games</a></li> <li><a href="#">Memberships</a></li> <li><a href="#">Gift Cards</a></li> </ul> </li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Games</a></li> <li><a href="#">Time Cards</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> </div><!--end container-->