css float在某些移动浏览器中无效

Question

如下图所示，这是我在一些移动浏览器中获得的，例如三星默认浏览器，UC浏览器 - 标题和导航栏之间的空白区域。在google chrome mobile，opera中，这个问题是不可见的。

标题和导航栏已将float：left应用于它们。如果我将左侧浮动移除到导航栏，则其他浏览器中也会出现空白区域。

这表明在上面提到的一些移动浏览器中没有应用float。

请为此提供解决方案。

这是我的代码（jsfiddle at https://jsfiddle.net/jtv7o9yb/）

Html -

<div class="head">
   <div class="head-wrapper">
     <div class="logo">
       LOGO
     </div>
     <div class="tagline">
       Tagline
     </div>
   </div>
</div>
<div class="main-nav" >
  <ul class="nav_bar">
     <li class="nav_bar-1">
     </li>
     <li class="nav_bar-2">
     </li>
     <li class="nav_bar-2">
     </li>
   </ul>
</div>

Css -

.head {
    background-color:#000000;
    height: auto;
    width: 100%;
    padding-left: 0;
    position: unset;
    float: left;
    color: white;
}

.head-wrapper {
    margin: 0 auto;
    width: 90%;
}
.logo{
    width: 18%;
    float: left;
    padding: 11px 0px 11px 0px;
}
.tagline {
    margin-left: 20%;
    margin-top: 2%;
    float: left;
    font-size: 22px;
}
.main-nav {
        background-color: red;
            float: left;
            width: 100%;
}
li.nav_bar-1 {
    float: left;
    padding-right: 14%;
    list-style-type: none;
    padding-left: 4%;
}
li.nav_bar-2 {
    float: left;
    padding-right: 11%;
    padding-left: 9%;
    white-space: nowrap;
}
@media screen and (max-width: 766px){
.main-nav {
        width: 100% !Important;
        padding-left: 0px;
        float: left;
    }

}