I'm having trouble aligning the Facebook and Google+ icons on my website, which can be found here. These circular icons are located just below the navigation bar at the top of the page. The navigation bar is part of a class called 'container_header' in the 'stylesheet.css' file.
The 'index.php' webpage contains the following code, where the icons should be placed within the top container:
<div class ="container_header">
<div class="header_img"><a href="index.php" class="head"><img border="0" src="images/introspect-pictures_logo_header.png" alt="Home" width="185" height="28"></a></div>
<div class="header">
<a href="index.php" class="body">HOME</a>..........<a href="about.php" class="body">ABOUT</a>
<div id="social">
<a href="https://www.facebook.com" target="_blank"><img border="0" src="images/ic_fb.png" alt="Facebook"></a>
<a href="https://www.google.com" target="_blank"><img border="0" src="images/ic_gp.png" alt="Google+"></a>
</div>
</div>
</div>
The 'stylesheet.css' file contains the styling for the icons within the 'social' class:
#social {
float: right;
width: 60px;
text-align: right;
}
#social a {
float: right;
margin: 20px 0 0 5px;
}
#social a img {
width: 24px;
height: 24px;
border: 0;
}
The properties of the 'container_header' class are defined within the same file as follows:
.container_header{
width:800px;
margin:0 auto 0 auto;
padding:10px;
border:0px solid #000000;
border-radius: 5px;
color: #666666;
}
Could anyone assist me in aligning the icons next to the navigation bar (beside 'About') so that they are contained within the 800px container width?
Thank you,
Pete