title: How to display two columns in a hero unit with Bootstrap?
body: <p>I am trying to get bootstrap's rows to work inside of a hero-unit.  I tired following this example <a href="https://stackoverflow.com/questions/9388597/how-to-display-a-thumbnail-in-the-hero-unit-with-bootstrap">How to display a thumbnail in the hero unit with Bootstrap?</a> but it doesn't appear to work. I only get 1 column in the hero.  My guess is that the padding is causing the columns to wrap because it appears to align correctly when setting padding to 0, but I'm not sure how to work around that correctly.</p>
  
  <pre><code>&lt;div class="hero-unit" style="padding: 15px;"&gt;
      &lt;div class="page-header"&gt;
          &lt;h2&gt;
              Example Page Header
              &lt;small&gt;Example Sub Header&lt;/small&gt;
          &lt;/h2&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="span4"&gt;
              &lt;img src="http://placehold.it/360x268" alt=""&gt;
          &lt;/div&gt;
  
          &lt;div class="span8"&gt;
              test
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>