Question

I cant get this hero-unit to move center like on http://twitter.github.com/bootstrap/examples/hero.html# with this original CSS –

.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;
}

See what I did on http://www.magnixsolutions.com/dev/test/test.html

My CSS is the same as the original file below. I dont understand whats going on.

.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;
 }

Answer 1

You missed two things 1 is

//From hero.html source code

body {
   padding-top: 60px;
   padding-bottom: 40px;
}

And other is

.container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 1170px;
}

The above css is from http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

Use above and then check.