how to get ul list centered within div [duplicate] - html

Question

This question already has answers here:
How can I horizontally center an element?
(133 answers)
How do I center floated elements?
(12 answers)
How do I center list items inside a UL element?
(14 answers)
How to horizontally align ul to center of div?
(5 answers)
Closed 4 years ago.
I create a fiddle here: http://jsfiddle.net/WayDf/27/
How can I get the four white boxes which is contained within a ul to be horizontally centered within the red bar? I've tried many things to footer #social ul I just cannot figure it out. I have ready through the many posts on this topic and have tried many things which have been suggested before, none which I can get to work on my particular issue. What am I missing?
footer {
width: 100%;
position: relative;
background-color: #C5C5C5;
display: block;
overflow: hidden;
}
footer section#footer-content {
max-width: 1440px;
min-height: 50px;
margin: 30px auto;
padding: 0 .694444%;
/* 10px / 1440px */
position: relative;
display: block;
overflow: hidden;
}
footer #social {
height: 30px;
margin: 0 auto;
background-color: red;
width: 600px;
position: relative;
}
footer #social ul {
list-style: none;
width: 100%;
margin: 0 50%;
}
footer #social li {
float: left;
margin: 0 .3em;
position: relative;
display: block;
width: 30px;
height: 30px;
overflow: hidden;
}
footer #social a {
text-decoration: none;
color: #CC7D29;
background: #ffffff;
display: block;
text-align: center;
height: 30px;
}
<footer>
<section id="footer-content">
<div id="social">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</section>
</footer>

Answer 1

Remove the margin on the <ul> and replace that with text-align:center; and padding:0;. The on the list items, remove the float and padding, and change the display to inline-block.
footer {
width: 100%;
position: relative;
background-color: #C5C5C5;
display: block;
overflow: hidden;
}
footer section#footer-content {
max-width: 1440px;
min-height: 50px;
margin: 30px auto;
padding: 0 .694444%;
/* 10px / 1440px */
position: relative;
display: block;
overflow: hidden;
}
footer #social {
height: 30px;
margin: 0 auto;
background-color: red;
width: 600px;
position: relative;
}
footer #social ul {
list-style: none;
width: 100%;
xmargin: 0 50%;
text-align:center;
padding:0;
}
footer #social li {
xfloat: left;
margin: 0 .3em;
position: relative;
display: inline-block;
width: 30px;
height: 30px;
overflow: hidden;
}
footer #social a {
text-decoration: none;
color: #CC7D29;
background: #ffffff;
display: block;
text-align: center;
height: 30px;
}
<footer>
<section id="footer-content">
<div id="social">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</section>
</footer>