issue aligning my footer 4 columns at center

Question

Im trying to do a footer with 4 columns, and I want that 2 columns stay above and the others below theese columns.

And I already have sucess doing this, but now Im having some difficulties alignin my 4 columns at center of my div #footer1.

Im tryng this: http://jsfiddle.net/GM23h/2/ (using margin:0 auto)

My html:

<footer class="footer-container">
    <section class="footer1">
         <div class="col">
            <h1>Contacts</h1>
            <ul>
                <li><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
                <li ><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
            </ul>
       </div> 
        <div class="col">
            <h1>Contacts</h1>
            <ul>
                <li><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
                <li ><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
            </ul>
       </div> 

        <div class="col">
            <h1>Contacts</h1>
            <ul>
                <li><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
                <li ><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
            </ul>
       </div> 

        <div class="col">
            <h1>Contacts</h1>
            <ul>
                <li><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
                <li ><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
            </ul>
       </div> 

    </section>
  </footer>

My css:

.footer-container
{
    width:100%;
    height:auto;
    float:left; 
} 

.footer1
{
    width:600px;
    margin:10px auto 10px auto;
    background:gray;
    overflow:hidden;
}

.footer1 ul 
{
    list-style:none; 
}


.footer1 ul li
{
    margin:0 0 7px 0;
}

.footer1 ul li a 
{   
    text-decoration:none;
}

.col
{
    float:left;
    margin:10px 10px 10px 10px;
    width:270px;
    height:155px;
    background:yellow;
}

.col h1
{
    border-bottom:1px dashed #ccc;
    color:#fff; 
    font-size:14px;
    margin-bottom:10px; 
    width:160px;
}

Answer 1

Add to your .footer1 CSS class:

text-align: center;

And replace in your .col CSS class

float:left;

With

display:inline-block;

Example