title: bootstrap navbar not adapting in container
body: <p>I need to put six menu items so I tried bootstrap navbar but its not fully adapting to full width in container.</p>
  
  <p>This is what menu should have come 
  <a href="http://s11.postimg.org/4rsxptslf/menu1.jpg" rel="nofollow">http://s11.postimg.org/4rsxptslf/menu1.jpg</a></p>
  
  <p>But this is what I got:
  <a href="http://s11.postimg.org/sy3l0yepv/gettingenu.jpg" rel="nofollow">http://s11.postimg.org/sy3l0yepv/gettingenu.jpg</a></p>
  
  <p>My HTML code</p>
  
  <pre><code>&lt;div class="row"&gt;
              &lt;nav class="navbar navbar-default"&gt;
  
                  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                  &lt;div class="navbar-header"&gt;
                    &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;/button&gt;
  
                  &lt;/div&gt;
  
                  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
                  &lt;div class="collapse navbar-collapse plr" id="bs-example-navbar-collapse-1"&gt;
  
                    &lt;ul class="nav navbar-nav menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;EVENTS &amp; PROMOTIONS &lt;/a&gt;&lt;/li&gt;       
  
                      &lt;li class="dropdown"&gt;
                        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;span&gt;PRODUCTION &lt;/span&gt;&lt;/a&gt;
                        &lt;ul class="dropdown-menu" role="menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;CORPORATE EVENTS&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;EXHIBITIONS&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;FASHIONS &amp; BEAUTY&lt;/a&gt;&lt;/li&gt;                      
                          &lt;li&gt;&lt;a href="#"&gt;CONCERTS&lt;/a&gt;&lt;/li&gt;                       
                          &lt;li&gt;&lt;a href="#"&gt;TALENT ENTERTAINMENT&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                      &lt;/li&gt; 
                      &lt;li class="dropdown-m"&gt;
                        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;PRODUCTION &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                        &lt;ul class="dropdown-menu" role="menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;CORPORATE EVENTS&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;EXHIBITIONS&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;FASHIONS &amp; BEAUTY&lt;/a&gt;&lt;/li&gt;                      
                          &lt;li&gt;&lt;a href="#"&gt;CONCERTS&lt;/a&gt;&lt;/li&gt;                       
                          &lt;li&gt;&lt;a href="#"&gt;TALENT ENTERTAINMENT&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;PRINTING &amp; BRANDING&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;ARTISTS &amp; TALENT&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;FASHION&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;VIDEO/FILM PRODUCTION&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;     
  
                  &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
              &lt;/nav&gt;
  
              &lt;/div&gt;
  </code></pre>
  
  <p>My CSS code I tried to override bootstrap </p>
  
  <pre><code>&lt;pre&gt;
  .nav &gt; li &gt; a {
      font-size: 16px; padding: 16px 15.0281%;
  }
  
  
  .menu {
      text-align: center;
  }
  
  .navbar-default .navbar-nav &gt; li &gt; a {
      color: #000;
  }
  
  
  .plr {
      padding-left: 0px;
      padding-right: 0px;
  }
  &lt;/pre&gt;
  </code></pre>
  
  <p>I also tried </p>
  
  <pre><code>.nav &gt; li &gt; a {
     padding: 16px 29px;
  }
  .nav &gt; li:last-child &gt; a {
     padding: 16px 40.1px;
  }
  </code></pre>
  
  <p>I'm making responsive site so I should desktop version correct first.</p>