title: Full length navbar
body: <p>I want my navbar to span the entire width like this www.ramenchicago.com but right now i can only get it all on the right. </p>
  
  <p>I have my css set up like this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar-wrapper &gt; .container {
      padding-right: 0;
      padding-left: 0;
      width: 100%;
  }
  .navbar-wrapper .navbar {
      padding-right: 15px;
      padding-left: 15px;
      width: 100%;
      background-color: rgba(0,0,0,0.8);
      
  }
  
  li {
      border-left: solid 1px white;
  }
  
  li:hover {
      background: rgba(0,0,0,0.3);
  }
  
  #navbar {
      display: table-row;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="navbar-wrapper"&gt;
              &lt;div class="container"&gt;
  
                  &lt;nav class="navbar navbar-inverse navbar-static-top"&gt;
                      &lt;div class="container"&gt;
                          &lt;div class="navbar-header"&gt;
                              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&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;div id="navbar" class="navbar-collapse collapse"&gt;
                              &lt;ul class="nav navbar-nav"&gt;
                                  &lt;li class="active"&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="dropdown"&gt;
                                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;ABOUT&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                      &lt;ul class="dropdown-menu"&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;LOCATION&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;PRESS&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#contact"&gt;STRINGS 1&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#contact"&gt;STRINGS 2&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#contact"&gt;HELL RAMEN&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#contact"&gt;JOBS&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#contact"&gt;DARK CHEFS&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Should I change my ul or li? Please help me out! 
  Also, it's my first time using Bootstrap so I'm not familiar with it yet. How do I remove the little arrow on the dropdown menu?</p>
  
  <p>Thanks!</p>