html - ul リストが画面の中央に配置されない

Question

私はオンラインで見回してきましたが、リストが中央に表示されない理由がわかりません

これはhtmlです

  <div id="footer" class="clear">   
            <ul id="nav2">
               <li><a href="#">CONTACT</a></li>
               <li><a href="https://www.facebook.com/tcstrathclyde?ref=ts&fref=ts"><img src="images/facebook.png" /></a></li>
               <li><a href="#">ABOUT US</a></li>
            </ul>
            <div class="copyright"> Copyright 2013 Teen Challenge Strathcylde. All rights reserved. Charity No: SC022209</div>
 </div><!--footer-->

そしてCSS

#footer {
width: 960px; height: 100px;   margin: 0 auto;
}

#footer ul#nav2 {
list-style: none; margin: 18px auto;
}
#footer ul#nav2 li {
    float: left; padding: 0 0 0 30px; margin: 0 100px 0 0;
}

#footer ul#nav2 a img {position:relative; bottom:10px; }

        #footer ul#nav2 li:first child { background:none; } 

        #footer ul#nav2 li a {
            font-size: 30px; color: #222930; font-family:Tahoma, Geneva, sans-serif; text-decoration: none; 
        }

            #footer ul#nav2 li a:hover, #header ul#nav1 li a:active {
                color: #e9e9e9;
            }

どんな助けでも大歓迎ですありがとう:)