Struggling to align images horizontally, they are all stacked on top of each other.
New to this and could use some assistance figuring it out!
Any help would be appreciated!
<div class="social">
<ul>
<div class="facebook">
<li><a href="#"></a></li>
</div>
<div class="twitter">
<li><a href="#"></a></li>
</div>
<div class="youtube">
<li><a href="#"></a></li>
</div>
<div class="vimeo">
<li><a href="#"></a></li>
</div>
</ul>
</div>
Here is the CSS code:
.social {
width: 50%;
margin: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
display: inline-block;
position: relative;
}
.social ul {
list-style: none;
margin: 0;
padding: 0;
}
.social ul li {
margin: 0;
padding: 0;
display: inline;
}
.facebook a:link {
background-image: url(../img/facebook.png);
width: 35px;
height: 35px;
background-position: left;
display: block;
border: none;
outline: none;
position: absolute;
}
.facebook a:hover {
background-position: bottom;
}
.twitter a:link {
background-image: url(../img/twitter.png);
width: 35px;
height: 35px;
background-position: left;
display: block;
border: none;
outline: none;
position: absolute;
}
.twitter a:hover {
background-position: bottom;
}
.youtube a:link {
background-image: url(../img/youtube.png);
width: 35px;
height: 35px;
background-position: left;
display: block;
border: none;
outline: none;
}
.youtube a:hover {
background-position: bottom;
}
.vimeo a:link {
background-image: url(../img/vimeo.png);
width: 35px;
height: 35px;
background-position: left;
display: block;
border: none;
outline: none;
}
.vimeo a:hover {
background-position: bottom;
}
View the JSFiddle code here.