проблема выравнивания моего нижнего колонтитула 4 колонки в центре

Я пытаюсь сделать нижний колонтитул с 4 столбцами, и я хочу, чтобы 2 столбца остались выше, а остальные - под столбцами.

И у меня уже есть успех, но теперь у меня возникают трудности с выравниванием моих 4 столбцов в центре моего div # footer1.

Im tryng это: http://jsfiddle.net/GM23h/2/ (с использованием margin: 0 auto)

Мой 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>

Мой 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;
}