CSS buttons won't display inline and overflow div - html

Question

I am new to programming and have been stuck for days trying to get my buttons to align horizontally in the center of their div. I have tried display: inline and display: inline-block and all the different solutions i have found on this forum and none have worked for me. Here is the css for the buttons:
div.contact {
padding: 0px;
margin: 0px;
background: #d6d6c2 url(https://clcadvisors.files.wordpress.com/2015/10/img_0914-0.jpg) no-repeat center;
background-size: cover;
height: 300px;
overflow: hidden;
}
ul.soc {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
display: inline-block;
}
li.socbutton a {
background-color: gray;
border: 2px solid black;
border-radius: 10px;
color: white;
text-align: center;
text-decoration: none;
text-shadow: 2px 2px black;
font-size: 24px;
margin: 20px;
padding: 20px;
box-shadow: 10px 10px 5px black;
width: 250px;
}
HTML:
<div class="contact">
<h3>Contact</h3>
<div>
<ul class="soc">
<li class="socbutton">
<i class= "fa fa-linkedin-square fa-fw"></i>LINKEDIN
</li>
<li class="socbutton">
<i class= "fa fa-twitter fa-fw"></i>TWITTER
</li>
<li class="socbutton">
<i class= "fa fa-facebook-official fa-fw"></i>FACEBOOK
</li>
</ul>
</div>
</div>
and the link to the codepen that I am building it in http://codepen.io/SHENKU360/pen/VedRbP
Thanks in advance for any help!

Answer 1

Add this to your CSS:
ul.soc {
width: 100%;
text-align: center;
}
ul.soc li {
display: inline-block;
}
This will align all the stuff inside your "unsorted list"-element to center. This element will also need a 100% width.
All list-elements inside should be display: inline-block;.

Answer 2

You need to inline the lis, not the as:
li.socbutton {
display: inline-block;
}
And make the ul center them:
ul.soc {
display: block;
text-align: center;
}

Answer 3

Add the following code in your css
li{
overflow: hidden;
margin-left:auto;
margin-right:0px; }
this link is also helpfull https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/