title: Hero-unit not displaying right
body: <p>I cant get this hero-unit to move center like on <a href="http://twitter.github.com/bootstrap/examples/hero.html#" rel="nofollow">http://twitter.github.com/bootstrap/examples/hero.html#</a> with this original CSS - </p>
  
  <pre><code>.hero-unit {
    padding: 60px;
    margin-bottom: 0px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    color: inherit;
    background-color: #eeeeee;
    border:1px solid #cacaca;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
  }
  </code></pre>
  
  <p>See what I did on <a href="http://www.magnixsolutions.com/dev/test/test.html" rel="nofollow">http://www.magnixsolutions.com/dev/test/test.html</a></p>
  
  <p>My CSS is the same as the original file below. I dont understand whats going on.</p>
  
  <pre><code>.hero-unit {
    padding: 60px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    background-color: #eeeeee;
    border:1px solid #cacaca;
    -webkit-border-radius: 10px;
           -moz-border-radius: 10px;
            border-radius: 10px;
   }
  </code></pre>