Выравнивать изображения справа от текста в контейнере

Question

Я пытаюсь выровнять два значка (facebook и google + icons) моего веб-сайта here. Эти маленькие круглые значки можно увидеть чуть ниже навигационной панели вверху. Панель навигации является частью класса «container_header», определенной в файле «stylesheet.css».

На веб-странице»„index.php“содержит этот код, в котором значки должны содержаться в верхнем контейнере:

<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<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> 

И в„stylesheet.css“иконки (в рамках„социального“класса) имеют свои свойства, определенные как таковые (с «#» с):

#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; 
} 

свойства класса «container_header» определяются в том же файле, как:

.container_header{ 
width:800px; 
margin:0 auto 0 auto; 
padding:10px; 
border:0px solid #000000; 
border-radius: 5px; 
color: #666666; 
} 

Может ли кто-нибудь помочь мне выровнять их рядом с панелью навигации (рядом с «О»), чтобы они также содержались в контейнере width (800px).

Большое спасибо,

Пит

Answer 1

Во-первых, избавиться от width из .header. Вот почему ваша социальная икона не сидит рядом с вашим пунктом меню. Затем удалите margin-top с #social a.

EDIT: Использование width:100%; для .header также будет работать.

Надеюсь, это поможет.

Answer 2

.header { 
background: #000000; 
width: 60%; 
float:right; 
font-size: 100%; 
color: #666666; 
font-family: ProximaNovaLight, Proxima Nova Light; 
text-align: center; 
} 

Затем положить социальный DIV до hrefs