scroll - Gap right of the page (overflow-x:hidden issue) -

there gap on right side of page 10px. fix using oveflow-x:hidden html , body if this, disable navbar effect

<script> $(window).scroll(function() {         var scroll = $(window).scrolltop();      if (scroll >= 120) {         $("#mainnav").addclass("scrolling");     } else {         $("#mainnav").removeclass("scrolling");     } }); </script>  

that changes navbar background-color when scroll down.

i tried width:100% well, didn't work neither.

could me eliminate gap without affect function? thank you

got it. see http://jsfiddle.net/uffo6you/3/ css specificity ranking of .scrolling wasn't strong enough override #mainnav. width , overflow shouldn't have bearing on @ all. pls confirm?

<style> #mainnav{     height: 20vh;     width: 80%;     background-color: blue;     color: white;     position: fixed; } #maincontent{     height: 200vh;     padding-top: 20vh; }  .scrolling{     background-color: red !important; } </style>  <div id="mainnav">top navbar</div> <div id="maincontent">          content goes here </div>   <script> $(window).scroll(function() {      var scroll = $(window).scrolltop();     console.log(scroll);     if (scroll >= 80) {          $("#mainnav").addclass("scrolling");      } else {         $("#mainnav").removeclass("scrolling");     }  }); </script>