I'm having trouble positioning icons next to each other horizontally and they keep stacking on top of one another. Can you please review my CSS code to see if I made a mistake?
Here is the CSS:
#social {
top:20px;
left:30px;
height:32px;
width:200px;
position:absolute;
z-index:2;
}
.facebook {
background-image:url(../img/64_x_64px/facebook_dark.png);
height:32px;
width:32px;
background-size:32px;
}
.facebook:hover {
background-image:url(../img/64_x_64px/facebook_active.png);
}
.twitter {
background-image:url(../img/64_x_64px/twitter_dark.png);
height:32px;
width:32px;
background-size:32px;
}
.twitter:hover {
background-image:url(../img/64_x_64px/twitter_active.png);
}
And here is my HTML:
<body>
<div id="social">
<div class="facebook"></div>
<div class="twitter"></div>
</div>
<div id="logo">
</div>
<div id="bar">
</div>
<div id="middle">
</div>
</body>
</html>
Thank you for your assistance.