title: Bootstrap 3 Full-width Jumbotron outside container after <header>
body: <p>Starting out with Bootstrap 3 and just getting used to it. </p>
  
  <p>I've copied the navbar from the Bootstrap 3 docs becuase it has the exact functionality that I want and why invent the wheel hey. </p>
  
  <p>I want to put a <strong>Jumbotron</strong> after the header but I want it to be full width, so according to the docs I don't enclose it in a <strong>container</strong> div. </p>
  
  <p>The problem is that when I omit the container div it slides back under the header but I want it to start where the header ends. If I put it inside a container it sits nicely under it. </p>
  
  <p>Can someone show me where I'm going wrong and how to fix it without making some hack div that pushes it down. Many thanks.</p>
  
  <p>I want to keep the container in the header tag becuase I don't want these elements stretching to the sides.</p>
  
  <pre><code>&lt;!-- Docs master nav --&gt;
  &lt;header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"&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 href="../" class="navbar-brand"&gt;&lt;img src="imagenes/logo.png" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"&gt;
        &lt;ul class="nav navbar-nav navbar-right pull-down"&gt;
          &lt;li class=""&gt;
            &lt;a href="#"&gt;Menu&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=""&gt;
            &lt;a href="#"&gt;Galería&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=""&gt;
            &lt;a href="#"&gt;Calendario&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=""&gt;
            &lt;a href="#"&gt;BH Musicos / Talentos&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=""&gt;
            &lt;a href="#"&gt;Blog&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=""&gt;
            &lt;a href="#"&gt;Contacto&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;div class="jumbotron"&gt;
    &lt;h1&gt;Hello World&lt;/h1&gt;
    &lt;p&gt;Testing one two three&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>