I am trying to center an element within a div while another element is positioned nearby. Using text-align: center gets the element close to where I want it, but not exactly due to the presence of another element. My goal is to have the logo element centered perfectly while keeping the social element floating to the right.
#header {
width: 100%;
height: auto;
text-align: center;
background-color: #ffffff;
}
#logo {
width: 30%;
margin: 10px auto;
display: inline-block;
text-align: center;
}
#logo img {
width: 100%;
height: auto;
margin: auto;
}
#social {
width: 15%;
display: inline;
float: right;
}
#social img {
width: 25%;
display: inline-block;
}<div id="header">
<div id="logo">
<img src="images/final/logo2.png">
</div>
<div id="social">
<img src="images/final/fb.png">
</div>
</div>