title: Static navbar does not extend in width
body: <p>I'm using Twitter Bootstrap's navbar with class <code>navbar-static-top</code>. When elements exceed the body width they do not expand the body, but just "move out of it" and thus causing navbar not to expand. How could i force my navbar to fit the whole top of my page?</p>
  
  <p>I'm using <code>DataTables</code> and in mobile the table is larger than the body width and goes out of bounds from body element however navbar ends with body width. I'd like for navbar to continue until there's scrollable space left on the page.</p>
  
  <p>This is my navbar code:</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-static-top navbar-lg" role="navigation"&gt;
  &lt;div class="container" &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" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&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;a class="navbar-brand" href="start.php"&gt;
              &lt;img src="http://placehold.it/150x51&amp;text=Logo" alt=""&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav col-lg-5 col-md-5 col-xs-12"&gt;
              &lt;li&gt;
                  &lt;a href=""&gt;Esileht&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href=""&gt;Korraldajad&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href=""&gt;Kontakt&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right col-lg-4 col-md-4 col-xs-12"&gt;
              &lt;form class="navbar-form navbar-input-group" action='functions.php' method='post'&gt;
                  &lt;div class="form-group"&gt;
                      &lt;select class="form-control" name='field_selector' id="field_selector"&gt;
                          &lt;option value='pet' &lt;?php if ($selected_field == "pet") { echo "selected";}?&gt;&gt;Petanque&lt;/option&gt;
                          &lt;option value='pil' &lt;?php if ($selected_field == "pil") { echo "selected";}?&gt;&gt;Pool&lt;/option&gt;
                        &lt;/select&gt;
                   &lt;/div&gt;
                   &lt;div class="form-group"&gt;
                      &lt;select class="form-control" name='lang_selector' id="lang_selector"&gt;
                          &lt;option value='EE' &lt;?php if ($selected_lang == "EE") { echo "selected";}?&gt;&gt;Eesti&lt;/option&gt;
                          &lt;option value='EN' &lt;?php if ($selected_lang == "EN") { echo "selected";}?&gt;&gt;Inglise&lt;/option&gt;
                        &lt;/select&gt;
                   &lt;/div&gt;
                   &lt;button class='btn btn-primary' name='changelang'&gt;Vaheta keelt/ala&lt;/button&gt;
              &lt;/form&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;!-- /.navbar-collapse --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is how it looks on page:</p>
  
  <p><a href="https://i.stack.imgur.com/6HNkH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6HNkH.png" alt="enter image description here"></a></p>
  
  <p>Body element ends where the navbar ends, i would like it to exceed to the full length of page. Any ideas?</p>
  
  <p>Edit:</p>
  
  <p>Adding more code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;!-- Navigation --&gt;
      &lt;?php include('navbar.php');?&gt;
  
      &lt;!-- Page Content --&gt;
      &lt;div class="container"&gt;
           &lt;!-- In here is the form and table --&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>