Center Unordered list horizontally

Question

I'm having trouble centering a horizontal un-ordered list that I have on a very basic 'coming soon' page.

You can follow the link to the site and have a look at the code and so on. You'll notice that the horizontal list with the 3 social icons are not quite centered relative to the big header and the email address, seems to be floating to the right a little bit.

Any ideas on how to fix this?

Answer 1

Set padding-left:0; on your ul element.

This will override the default browser -webkit-padding-start: 40px; which Google Chrome is offsetting the center position. Other browser defaults may vary.

Tested in Google Chrome and this resolves the issue.

Answer 2

Remove the left padding from the .social_list element.

.social_list {
  padding: 0;
}

Firebug makes figuring this kind of problem out much easier as it will show you the padding and margins on elements when you inspect the DOM.

Answer 3

@Curt answer is right but you need to reset your elements, and you are actually facing this issue because of it

Use this to reset browser default, I always use this instead of CSS Reset stylesheet..

* {
  padding: 0;
  margin: 0;
}

Than you don't need to declare padding-left: 0; for every ul you use on your web page, because browsers set default styles for some elements and hence you are facing this problem