title: Div centering issue. More complicated then I thought
body: <p>The fiddle is contained <a href="http://jsfiddle.net/thematejka/abnGa/1/" rel="nofollow">here</a></p>
  
  <p>Code below is a sample of the relevant code, everything is in the fiddle.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="wrapper" &gt;
      &lt;header&gt;
          &lt;div class="hwrapper"&gt;
          &lt;div class="box effect2"&gt;
              &lt;img src="media/header1.jpg" width="150px" height="150px" style="padding-top:5px;" /&gt;               
          &lt;/div&gt;
          &lt;div class="box effect2"&gt;
              &lt;img src="media/header2.jpg" width="150px" height="150px" style="padding-top:5px;" /&gt;               
          &lt;/div&gt;
          &lt;div class="box effect2"&gt;
              &lt;img src="media/header3.jpg" width="150px" height="150px" style="padding-top:5px;" /&gt;               
          &lt;/div&gt;
          &lt;div class="box effect2"&gt;
              &lt;img src="media/header4.jpg" width="150px" height="150px" style="padding-top:5px;" /&gt;               
          &lt;/div&gt;
          &lt;div class="box effect2"&gt;
              &lt;img src="media/header5.jpg" width="150px" height="150px" style="padding-top:5px;" /&gt;               
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    body {
      text-align: center;
      margin:0;
      padding:0;
      background-image:url('../media/background.gif');
      background-repeat: repeat;
  }
  
  #wrapper {
  
  }
  
  header {
      width:100%;
      height:300px;
      -webkit-box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4);
      -moz-box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4);
      box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4);
  
  }
  
  /*---------header images--------*/
  
  .hwrapper {
  
  }
  
  .box {
      width:160px;
      height:160px;
      background:#FFF;
      margin-top:20px;
      margin-bottom:20px;
      margin-left:20px;
      margin-right:20px;
      float: left;
  }
  
  .effect2 {
    position: relative;
  }
  
  .effect2:before, .effect2:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 14px;
    left: 5px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
  }
  
  .effect2:after {
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
    right: 5px;
    left: auto;
  }
  </code></pre>
  
  <p>Okay, so I made a nice row of pictures to run along the top of my page with a neat page curl effect. The problem is that it won't center with the rest of my content so far. It stays to the left, which is due to the float:left css rule in .box.</p>
  
  <p>If I take away float:left, the row of pictures turns into a column running down the page, instead of a nice horizontal row.</p>
  
  <p>I have an .hwrapper div class around my row of pictures to set rules to center everything while keeping the float:left in .box, but none of my middle-aligning tricks are working. I'm not sure where the conflict is, perhaps in my page curl css?</p>
  
  <p>thanks in advance.</p>