title: horizontal scrollbar showing even when overflow is hidden
body: <p>I'm running into a problem in my website, where an horizontal scrollbar is always showing even when i add overflow-x: hidden to the body, html elements. Instead of hiding the scrollbar, another scrollbar is added vertically and now i have two vertical scrollbars!</p>
  
  <p>This happened because i have a centered navigation and add to set a child div of that same navigation, to 100% of the viewport width. Checked the developer tools in chrome and that div is going some pixels to the right.</p>
  
  <p>Anyway, since overflow didn't work, i tried to change the values of the calc() function to subtract those pixels but the horizontal scrollbar is still there.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div id="container"&gt;
          &lt;ul class="nav"&gt;
              &lt;li&gt;&lt;a href="index.php"&gt;home&lt;/a&gt;&lt;/li&gt; 
  
              &lt;li&gt;
                  &lt;a href="#"&gt;destinations&lt;/a&gt;
                  &lt;div&gt;    
                  &lt;div class="nav-column"&gt;                        
  
                  &lt;/div&gt;
  
                  &lt;div class="nav-column"&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="nav-column"&gt;
  
                  &lt;/div&gt; 
  
                  &lt;div class="nav-column"&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="nav-column"&gt;   
  
                  &lt;/div&gt;
  
                  &lt;/div&gt;   
              &lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#about"&gt;about&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;         
  &lt;/div&gt;   
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>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 &gt; li {
  
  display: block;
  float: left;
  }
  
  .nav &gt; li &gt; 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 &gt; li &gt; 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 &gt; 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 &gt; 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 &gt; 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 &gt; div {
  opacity: 1;
  top: 113px;
  }    
  
  .nav &gt; li &gt; 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;
  }    
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/kukj43qz/9/" rel="nofollow noreferrer">And a fiddle example</a></p>