Hero-unit not displaying right
<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>
