title: Overflow-x:hidden; on mobile device not working
body: <p>I hope you guys can help me cause I cant seem to wrap my head arroud this. I build a one-page site which works fine, except for one thing, which is the overflow-x:hidden on the tablet viewport (and probably smartphone too, havent tested that yet)</p>
  
  <p>Despite the body having <code>body {overflow-x:hidden;}</code> which works fine within normal browsers on the pc, i am able to move to the side for about 25 pixels or so, cause thats the overflow of my rotated div, that sticks out of the screen, which i wanted to hide.</p>
  
  <p>Is there a way to fix this? I supplied below part of the head and html / css</p>
  
  <p>The viewport meta tag.</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  </code></pre>
  
  <p>The CSS applied to the media queries and they respective elements that overflow</p>
  
  <pre><code>@media only screen and (max-width: 992px){
      #skills, #experience    {overflow-x:hidden;}
  }
  @media (max-width: 479px){
      body                    {overflow-x:hidden;}
  }
  </code></pre>
  
  <p>And the regular CSS applied to the html / body tags</p>
  
  <pre><code>body, html  {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}
  </code></pre>
  
  <p>The id's <code>#skills</code> and <code>#experience</code> have a class called <code>.hoek</code>  which is defined as followed and causes the overflow.</p>
  
  <pre><code>    .hoek    {margin: 0 -50px; 
                -webkit-transform-origin:left center; 
                -moz-transform-origin:left center; 
                -o-transform-origin:left center; 
                -ms-transform-origin:left center;
                margin-top: -175px;                       
                -webkit-transform:rotate(5deg); 
                -moz-transform:rotate(5deg); 
                -o-transform:rotate(5deg); 
                -ms-transform:rotate(5deg);
                z-index: 20;
      }
  </code></pre>
  
  <p>I must point out, I think, that the <code>#skills</code> and <code>#experience</code> are <code>sections</code> and not divs. I am not sure if that might be a problem within the code, but I thought not. If there is anymore information that is needed, please let me know, but I thought I had covered the bases here.</p>
  
  <p>I dont know where to begin with a fiddle, so I supply you just the test link of the site: <a href="http://www.jellyfishwebdesign.nl/Joost/index.php" rel="noreferrer">http://www.jellyfishwebdesign.nl/Joost/index.php</a>  </p>