Bootstrap Navbar Make Brand and Navbar-Right “Stick” to side of webpage

Question

I am having trouble making sure that the navbar-brand sticks to the complete right of the screen on bigger 1080*1920 screen. Same goes for the navbar-right . When you get to bigger screen a margin is created by bootstrap on both sides of the navbar. How can I "fix" that?

This is all my code:

 /* Move body down */ body{ position: relative; top: 50px; } /*TODO Check what makes the hover items dark blue*/ .navbar { text-transform: uppercase; margin-bottom: 0px; } .navbar-inverse { padding-bottom: 70px; padding-top: 70px; } .navbar-inverse .navbar-nav > li > a { color: white; } .navbar-brand { font-weight: 700; font-size: 20px; letter-spacing: 2px; } .navbar-inverse .navbar-toggle { border-color: transparent; } .navbar-trans { background-color:#279ddd; color:#fff; } .navbar-trans li>a:hover,.navbar-trans li>a:focus,.navbar-trans li.active { background-color:#38afef; } .navbar-trans a{ color:#fefefe; } /*Drop down menu styling*/ ul.dropdown-menu{ background-color: #279ddd; } ul.dropdown-menu { background-color: #279ddd; } ul.dropdown-menu li a{ color: white; } /*Dropdown on Hover*/ .sidebar-nav { padding: 9px 0; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; } .dropdown:hover .dropdown-menu { display: block; } .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { margin-top: 0; } .navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px; } .navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px; } .navbar .center{ border-top: 6px solid transparent; border-left: none; border-right: 6px solid transparent; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px; } /*.first{ border-left: 5px solid transparent; margin-left: 100px; }*/ 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script> <!-- Navigation --> <nav class="navbar navbar-trans navbar-fixed-top" role="navigation"> <!-- Container makes the navbar extend across the whole screen, removing the default curved sides --> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <div id="sidebar_toggle" class="sidebar-toggle-box fa fa-bars tooltips navbar-brand" data-original-title="Toggle Navigation"></div> <a class="navbar-brand">Pandora</a> </div> <ul class="nav navbar-nav navbar-right"> <li class="hide_on_small_screen"><a href="/"><i class="fa fa-dashboard"></i> Home</a></li> </ul> </div><!-- container-collapse --> </nav> 

Thank you. Please let me know if I wasn't clear enough.

Answer 1

Use container-fluid instead of container .

 /*TODO Check what makes the hover items dark blue*/ .navbar { text-transform: uppercase; margin-bottom: 0px; } .navbar-inverse { padding-bottom: 70px; padding-top: 70px; } .navbar-inverse .navbar-nav > li > a { color: white; } .navbar-brand { font-weight: 700; font-size: 20px; letter-spacing: 2px; } .navbar-inverse .navbar-toggle { border-color: transparent; } .navbar-trans { background-color: #279ddd; color: #fff; } .navbar-trans li>a:hover, .navbar-trans li>a:focus, .navbar-trans li.active { background-color: #38afef; } .navbar-trans a { color: #fefefe; } /*Drop down menu styling*/ ul.dropdown-menu { background-color: #279ddd; } ul.dropdown-menu { background-color: #279ddd; } ul.dropdown-menu li a { color: white; } /*Dropdown on Hover*/ .sidebar-nav { padding: 9px 0; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; } .dropdown:hover .dropdown-menu { display: block; } .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { margin-top: 0; } .navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px; } .navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px; } .navbar .center { border-top: 6px solid transparent; border-left: none; border-right: 6px solid transparent; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px; } /*.first{ border-left: 5px solid transparent; margin-left: 100px; }*/ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <!-- Navigation --> <nav class="navbar navbar-trans navbar-fixed-top" role="navigation"> <!-- Container makes the navbar extend across the whole screen, removing the default curved sides --> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <div id="sidebar_toggle" class="sidebar-toggle-box fa fa-bars tooltips navbar-brand" data-original-title="Toggle Navigation"></div> <a class="navbar-brand">Pandora</a> </div> <ul class="nav navbar-nav navbar-right"> <li class="hide_on_small_screen"><a href="/"><i class="fa fa-dashboard"></i> Home</a> </li> </ul> </div> <!-- container-collapse --> </nav>