Div не плавающий вправо полностью

Question

Есть социальное меню, которое мне нужно плавать полностью справа от моей страницы и оставаться фиксированным. Тем не менее, это разновидность поплавков где-то случайно. просто ищем возможное исправление

Вот скрипка: http://jsfiddle.net/m7vaywmh/

HTML

<div class="social_wrap"> 
    <div class="social"> 
     <a href="https://www.linkedin.com/profile/view?id=387766698&trk=nav_responsive_tab_profile" target="_blank"><img class="move" src="images/linked.png"/></a> 
     <a href="https://www.behance.net/lukerbab3a51" target="_blank"><img class="move" src="images/behance.png"/></a>     
     <a href="http://factordog.deviantart.com/" target="_blank"><img class="move" src="images/deviant.png"></a> 
     <a href="https://www.youtube.com/channel/UCMM-HzbbBtU6DhNlUL71rrQ" target="_blank"><img class="move" src="images/yt.png"/></a> 
     <a href="https://www.facebook.com/LukebMedia?sk=timeline&app_data" target="_blank"><img class="move" src="images/fb.png"/></a>      
    </div><!--social -->  
</div> 

CSS:

.social_wrap{ 
    background:#3F3; 
    width:100%; 
    height:60px; 
    position:fixed; 
    z-index:5001; 
} 
.social{ 
    position:relative; 
    float:right; 
    width:45%; 
    right:0px; 
    margin-top:15px; 

} 
.social img{ 
    width:5%; 
    min-width:15px; 
    padding-right:10px; 
} 

Answer 1

Вам трудно ширину на ваш .social классе и по умолчанию text-align осталось.

Добавить text-align: right в .social

.social_wrap{ 
 
    background:#3F3; 
 
    width:100%; 
 
    height:60px; 
 
    position:fixed; 
 
    z-index:5001; 
 
} 
 
.social{ 
 
    position:relative; 
 
    float:right;  
 
    width:45%; 
 
    right:0px; 
 
    text-align: right; 
 
    margin-top:15px; 
 

 
} 
 
.social img{ 
 
    width:5%; 
 
    min-width:15px; 
 
    padding-right:10px; 
 
}

<div class="social_wrap"> 
 
     <div class="social"> 
 
      <a href="https://www.linkedin.com/profile/view?id=387766698&trk=nav_responsive_tab_profile" target="_blank"><img class="move" src="images/linked.png"/></a> 
 
      <a href="https://www.behance.net/lukerbab3a51" target="_blank"><img class="move" src="images/behance.png"/></a>     
 
      <a href="http://factordog.deviantart.com/" target="_blank"><img class="move" src="images/deviant.png"></a> 
 
      <a href="https://www.youtube.com/channel/UCMM-HzbbBtU6DhNlUL71rrQ" target="_blank"><img class="move" src="images/yt.png"/></a> 
 
      <a href="https://www.facebook.com/LukebMedia?sk=timeline&app_data" target="_blank"><img class="move" src="images/fb.png"/></a>      
 
     </div><!--social -->  
 
    </div>

Answer 2

Просто измените свойства .social со следующим кодом. Также я делюсь своим опытом с вами. Всякий раз, когда у меня возникают подобные проблемы. Я пытаюсь использовать границу, это помогает видеть содержимое float.

.social { 
    position:relative; 
    float:right; 
    width:45%; 
    right:0px; 
    margin-top:15px; 
    text-align:right; 
    padding-right:15px; 

}