헤더는 다른 broswers에 다른 보이는

Question

여기이 헤더 ...

가 좋아 보인다,하지만, 파이어 폭스에서, 왼쪽과 오른쪽이 너무 짧은 구글 크롬에서

.header { 
    background-color: #FFFFFF; 
    padding-left: 16px; 
    width: 920px; 
} 

.logo { 
    background-color: #FFFFFF; 
    float: left; 
    padding-left: 10px; 
    padding-right: 20px; 
    width: 500px; 
} 

.phoneNumber { 
    background-color: #FFFFFF; 
    color: #44BAD2; 
    float: left; 
    font-size: 22px; 
    height: 94px; 
    line-height: 95px; 
    width: 155px; 
} 

.social { 
    background-color: #FFFFFF; 
    float: left; 
    font-size: 18px; 
    height: 69px; 
    padding-left: 10px; 
    padding-top: 25px; 
    width: 190px; 
} 

.social ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0 0 0 15px; 
} 

.social li { 
    float: left; 
} 

, 당신은 http://www.surfthecurve.ca에이를 볼 수 있습니다 여기

또한 HTML 당신이 수레를 삭제해야

<div class="header"> 

<div class="social"> 
<ul> 
<li class="facebook"> 
<a target="_blank" href="http://www.facebook.com/SurfTheCurve"></a> 
</li> 
<li class="twitter"> 
<a target="_blank" href="https://twitter.com/SurfCurveTutor"></a> 
</li> 
<li class="email"> 
<a target="_blank" href="mailto:info@surfthecurve.ca?subject=Website Enquiry"></a> 
</li> 
</ul> 
</div><!--social--> 

<div class="logo"> 
<a href="http://surfthecurve.ca/"><img src="http://surfthecurve.ca/wp-content/themes/twentyeleven/images/logo.jpg" width="500" border="0" /></a> 
</div><!--logo--> 

<div class="phoneNumber"> 
647.390.3070 
</div><!--phoneNumber--> 


</div><!--header--> 

Answer 1

입니다. clear : both 또는 clearfix 메소드를 사용할 수 있습니다.

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
}