We need to do this:

here it is

I did, but obviously not rubber. Can you explain what's what and help?

.navbar { background: #f76e5d; height: 90px; } .nav,.navbar-nav,.navbar { border-radius: 0; } .nav li a{ line-height: 59px; color: #fff; font-size: 17px; text-transform: uppercase; } .nav li a:hover { background: #000;/*#f88172;*/ } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <nav> <div class="container navbar"> <div class="row"> <div class="container" style="width: 401px;"> <ul class="nav navbar-nav"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Work</a></li> <li><a href="">Contact</a></li> </ul> </div> </div> </div> </nav>

There bootstrap itself is still connected.

    2 answers 2

    Take an example from the site of Bootstrap . Delete the extra items and everything that collapses the menu on a mobile screen. Will remain:

     <nav class="navbar navbar-default"> <div class="container"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav>

    Now we will remake the styles. Take as a basis what is written in bootstrap.css about navbar-default and .navbar-default .navbar-nav :

     .navbar-default { background-color: #f8f8f8; border-color: #e7e7e7; } .navbar-default .navbar-nav > li > a { color: #777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; background-color: transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #e7e7e7; }

    Grow from this our .navbar-red-centered class. First, we indent and height the elements:

     .navbar-red-centered .navbar-nav { margin: 0; } .navbar-red-centered .navbar-nav > li > a { line-height: 90px; padding: 0 15px; }

    Then center it horizontally:

     .navbar-red-centered .navbar-nav { float: none; text-align: center; } .navbar-red-centered .navbar-nav > li { display: inline-block; float: none; }

    And repaint. It turns out, for example, like this:

    screenshot

    http://codepen.io/glebkema/pen/GNvpdL

      .navbar-red-centered .container { background: #f76e5d; } .navbar-red-centered .navbar-nav { float: none; margin: 0; text-align: center; } .navbar-red-centered .navbar-nav > li { display: inline-block; float: none; } .navbar-red-centered .navbar-nav > li > a { line-height: 90px; color: #fff; font-size: 17px; padding: 0 15px; text-transform: uppercase; } .navbar-red-centered .navbar-nav > li > a:hover, .navbar-red-centered .navbar-nav > li > a:focus { color: #333; background-color: transparent; } .navbar-red-centered .navbar-nav > .active > a, .navbar-red-centered .navbar-nav > .active > a:hover, .navbar-red-centered .navbar-nav > .active > a:focus { color: #555; background: #ffc6ad; } 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <nav class="navbar navbar-red-centered"> <div class="container"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> 

       style="width: 401px;"

      So you width specified, from where it will be rubber. ;)