title: Twitter Bootstrap Div centering issue within a full-width container
body: <p>The layout is seems very simple however troubleshooting seems to be beyond my css and bootrstap skills - </p>
  
  <p>I am trying to have a full-width div with a gradient background - #topwrapper, which will then hold another div of fixed dimensions (span12 = 1170px) centered - #headerimage. The goal is to have the #headerimage div scaled as tghe browser is resized. </p>
  
  <p>Issue is, that for some unknown reason the #headerimage get pushed to the left instead of being centered.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;div class="container" id="topwrapper"&gt;
     &lt;div class="row-fluid"&gt;
        &lt;div class="span12" id="headerimage"&gt;PLEASE CENTER&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  #topwrapper {
      width:100%;
      height:270px;
      background:url(../img/tophead-wrapper-bg.png) repeat transparent;   
  }
  
  #headerimage {
      background:url(../img/thbg01.jpg) no-repeat transparent;   
      height:270px;
      margin:0 auto;
  }
  </code></pre>
  
  <p>And here is the link to the page in question:
  <a href="http://kh.kagyu.org" rel="nofollow">http://kh.kagyu.org</a>. Disregard anything below the red bar</p>
  
  <p>Anyone knows the solution to this problem?</p>