title: Bootstrap layout outside of container
body: <p>I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.</p>
  
  <p>The logo's background should start from the edge of the window, but the text in the logo should start where the <code>.container</code> begins.
  Crazy, huh!</p>
  
  <p>I'm not sure how to explain this so I drew it!
  <a href="https://i.stack.imgur.com/1qyuj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1qyuj.png" alt="enter image description here"></a></p>
  
  <p>What I've done so far is this:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;header&gt;
      &lt;div id="logo" class="pull-left col-sm-3 bg-theme"&gt;
        &lt;div class="typography"&gt;
          Dope
          &lt;br/&gt;
          Text
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-9"&gt;
        &lt;nav class="pull-right"&gt; nav should be here &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;!-- header --&gt;
  &lt;/div&gt;
  
  
  #logo {
    position: relative;
    height: 100px;
    background: #ffd800;
  }
  
  .typography {
    position: absolute;
    right: 0px;
    top: 20px;
    line-height: 50px;
    font-size: 50px;
    font-weight: bold;
  }
  </code></pre>
  
  <p>I created a <a href="http://jsfiddle.net/c1n72snx/" rel="nofollow noreferrer">demo@jsFiddle</a>.</p>
  
  <p>How should I structure my HTML, or what can I do with the CSS to achieve this effect. </p>
  
  <p>CSS only solutions if possible.</p>
  
  <p><strong>Edit</strong>: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after. </p>