Is there a simple way (i.e. not a total hack) to reposition these elements?

Question

As you see in this fiddle...

http://jsfiddle.net/mjmitche/xt4aQ/78/

there are four rows of three columns that aren't positioned properly against the black background. I want to be able to reposition them inside the black background. This roughly corresponds (ie the exact sizes might change)to what I'm trying to do on the web page I'm making.

Is there a way using position: absolute or position: relative or something else to try to centre the columsn against the black background?

Note, as you see in the fiddle, I'm using Twitter bootstrap.css (which comes with a lot of helpful spans classes and rows that determine widths etc

Here's the code, but it's probably easier to look at the fiddle. http://jsfiddle.net/mjmitche/xt4aQ/78/

<div class="span8">
    <div class="row">
  <div class="span2">

    </div>
   <div class="span6">
       <div class="row">

       <div class="span2">
           <img src="http://dummyimage.com/48x48/fff/fff"/>
        </div>
       <div class="span2">
                <img src="http://dummyimage.com/48x48/fff/fff"/>
        </div>
       <div class="span2">
                <img src="http://dummyimage.com/48x48/fff/fff"/>
        </div>
        </div>

       <div class="row">

       <div class="span2">
           <img src="http://dummyimage.com/48x48/fff/fff"/>
        </div>
       <div class="span2">
                <img src="http://dummyimage.com/48x48/fff/fff"/>
        </div>
       <div class="span2">
                <img src="http://dummyimage.com/48x48/fff/fff"/>
        </div>
        </div>

       <div class="row">

       <div class="span2">
           <img src="http://dummyimage.com/48x48/fff/fff"/>
        </div>
       <div class="span2">
                <img src="http://dummyimage.com/48x48/fff/fff"/>
        </div>
       <div class="span2">
                <img src="http://dummyimage.com/48x48/fff/fff"/>
        </div>
        </div>

       <div class="row">

       <div class="span2">
           <img src="http://dummyimage.com/48x48/fff/fff"/>
        </div>
       <div class="span2">
                <img src="http://dummyimage.com/48x48/fff/fff"/>
        </div>
       <div class="span2">
                <img src="http://dummyimage.com/48x48/fff/fff"/>
        </div>
        </div>
    </div> 
  </div>

</div>

Answer 1

Just put a wrapper around all your HTML inside of the background and set the left and right margin to auto. This centers everything on the background. You also have to set a width to the wrapper. Here I set it to 290px's.

http://jsfiddle.net/xt4aQ/98/