html - ul list not centering in screen -
i have been looking around online , can't see reason why list not centering
this 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. rights reserved. charity no: sc022209</div> </div><!--footer-->
and 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 img {position:relative; bottom:10px; } #footer ul#nav2 li:first child { background:none; } #footer ul#nav2 li { 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; }
any appreciated :)
try css
#footer { width: 960px; height: 100px; margin: 0 auto; text-align: center; } #footer ul#nav2 { list-style: none; padding: 0; } #footer ul#nav2 li { display: inline-block; margin: 0 10px; width: 150px; } #footer ul#nav2 img { position:relative; bottom:10px; } #footer ul#nav2 li:first child { background:none; } #footer ul#nav2 li { 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; }