Горизонтальная полоса прокрутки, показывающая, даже когда переполнение скрыто.

Question

У меня возникает проблема на моем веб-сайте, где горизонтальная полоса прокрутки всегда отображается, даже когда я добавляю overflow-x: скрытый в тело, элементы html. Вместо того, чтобы скрывать полосу прокрутки, еще одна полоса прокрутки добавляется вертикально, и теперь у меня есть две вертикальные полосы прокрутки!

Это произошло потому, что у меня есть центрированная навигация и добавьте, чтобы установить дочерний div той же навигации, на 100% ширины окна просмотра. Проверяли инструменты разработчика в хроме, а div - на несколько пикселей справа.

В любом случае, поскольку переполнение не работает, я попытался изменить значения функции calc(), чтобы вычесть эти пиксели, но горизонтальная полоса прокрутки все еще существует.

Вот мой код:

<div id="container"> 
     <ul class="nav"> 
      <li><a href="index.php">home</a></li> 

      <li> 
       <a href="#">destinations</a> 
       <div>  
       <div class="nav-column">       

       </div> 

       <div class="nav-column"> 

       </div> 

       <div class="nav-column"> 

       </div> 

       <div class="nav-column"> 

       </div> 

       <div class="nav-column"> 

       </div> 

       </div> 
      </li> 

      <li><a href="#about">about</a></li> 
      <li><a href="#contact">contact</a></li> 
     </ul>   
</div> 

И CSS:

body,html { 
background-color: white; 
border: 0; 
outline: 0; 
margin: 0; 
padding: 0;  
max-width: 100%; 
overflow-x: hidden; 
} 
#container {  
display: block; 
margin: 0 auto; 
text-align: center; 
position: relative; 
width: 100%; 

} 

.nav { 
cursor: default; 
display: inline-block; 
height: 125px; 
position: relative; 
top: 50px; 
width: auto; 


-ms-flex-pack: center; 
-ms-display: -ms-flexbox; 
} 

.nav, 
.nav a, 
.nav ul, 
.nav li, 
.nav div { 
border: none; 
padding: 0; 
margin: 0; 
outline: none; 
} 

.nav a { 
text-decoration: none; 
} 

.nav li { 
list-style: none; 
} 

.nav > li { 

display: block; 
float: left; 
} 

.nav > li > a { 

display: block; 
color: black; 
font-family: 'Oswald', sans-serif; 
font-size: 1.2em; 
font-weight: 500; 
text-transform: uppercase; 
height: 30px; 
padding: 0 20px; 
position: relative; 
z-index: 510; 

-webkit-transition: all .3s ease; 
-moz-transition: all .3s ease; 
-o-transition: all .3s ease; 
-ms-transition: all .3s ease; 
transition: all .3s ease; 
} 

.nav li:hover a { 
background: black; 
color: white; 

} 

.nav > li > div { 
border: 1px solid black; 
display: inline-block; 
color: black; 
position: absolute; 
top: 30px; 
left: calc(-50vw + 50%); 
width: 100vw; 
opacity: 0; 
overflow: hidden; 
visibility: hidden; 

background: white; 
z-index: 500; 

-webkit-transition: all .3s ease .5s; 
-moz-transition: all .3s ease .5s; 
-o-transition: all .3s ease .5s; 
-ms-transition: all .3s ease .5s; 
transition: all .3s ease .5s; 
} 

.nav li:hover > div { 
opacity: .7; 
visibility: visible ; 
overflow: hidden; 
} 

.nav .nav-column { 
background-color: white; 
float: left; 
text-align: left; 
top: -30px; 
padding: 2%; 
position: relative; 
width: 15%; 
} 

.nav .nav-column h3 { 
color: #d1a559; 
font-family: Orator Std, IrisUPC, sans-serif; 
font-weight: 900; 
margin: 20px 0 10px 0; 
text-decoration: underline ; 
} 

.nav .nav-column li { 
padding-left: 0;  
font-family: Palatino linotype, Rockwell; 
} 

.nav .nav-column li a { 
background: white; 
color: black; 
display: block; 

} 

.nav .nav-column li a:hover { 
background: #d1a559; 
color: white; 

-webkit-transition: all .1s ease; 
-moz-transition: all .1s ease; 
-o-transition: all .1s ease; 
-ms-transition: all .1s ease; 
transition: all .1s ease; 
} 

@media (max-width:1420px) { 


.Thumbnails { 
    float: none; 
} 
} 

@media (max-width: 950px) { 
.nav li:hover > div { 
background-color: white; 
opacity: 1; 
} 

.nav .nav-column { 
position: relative; 
width: 20%; 
} 

.nav .nav-column li { 
list-style: none; 
} 
} 

@media (max-width: 700px) { 
.nav li:hover > div { 
background-color: white; 
left: 0; 
opacity: 1; 
width: 100%; 
} 

.nav .nav-column { 
float: none; 
}  
} 

    .colAbout { 
    display: block; 
    float: none; 
    } 

.span_1_of_3 { 
    width: 70%; 
    } 

@media (max-width: 530px) { 
.nav { 
    display: none; 
    text-align: left; 
    height: 150px; 
    top: 0; 
    padding: 0; 
    margin: 0; 
    position: relative; 
    z-index: 999; 
}  

.nav li { 
float: none; 
left: 0; 
} 

.nav li:hover > div { 
opacity: 1; 
top: 113px; 
}  

.nav > li > a { 
border-right: none; 
display: block; 
left: 0;  
}  

/*Div contendo responsive button*/  
#menu { 
border: 1px solid black; 
color: black; 
cursor: pointer; 
display: block; 
font-size: 1.3em; 
left: 0; 
margin: 5%; 
position: relative; 
text-align: center; 
z-index: 540; 
width: 1.4em; 
} 

#container { 
left: 0; 
display: block;  
padding: 0; 
position: relative; 
width: 100%; 
} 

ul { 
width: 100%; 
list-style: none; 
} 
} 

@media (min-width: 530px) { 
#menu { 
display: none; 
}  
} 

And a fiddle example

Answer 1

меня проверить файл вашего CSS. Вывод прокрутки разума, вы должны прокомментировать 2 свойства css: position: relative; top: 34px;

.nav { 
cursor: default; 
display: inline-block; 
height: 125px; 
width: auto; 
-ms-flex-pack: center; 
-ms-display: -ms-flexbox; 

}

Answer 2

Если вы просто хотите, чтобы скрыть полосу прокрутки:

#container { 
    overflow: hidden!important; 
}