title: Prevent horizontal scrolling on mobile safari, overflow-x:hidden breaks site
body: <p><img src="https://i.stack.imgur.com/skvx1.png" alt="enter image description here">I am looking to prevent horizontal scrolling on my portfolio site in mobile safari.  The design features content div's that are off the screen, until a user clicks a menu item then they transition onto the screen.  This works fine on desktop, but on mobile it leaves a ton of extra white space that a user can scroll horizontally into.</p>
  
  <p>the site is <a href="http://www.robiannone.com" rel="nofollow noreferrer">http://www.robiannone.com</a></p>
  
  <p>I have used this viewport tag
      <code>&lt;meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0,         initial-scale=1" /&gt;</code></p>
  
  <p>and I have tried using <code>overflow-x:hidden</code> with a media query without any luck.  When I add overflow-x:hidden to the html or body tag nothing happens, however when I add it to both the html and body tag the site breaks, and puts a scroll bar near the header.  I have searched for other solutions but have so far not come up with anything to help.  Will it just not work because I am intentionally placing content off screen?</p>
  
  <p>Much thanks for any help you can provide!</p>
  
  <p>Here is the css for the content div's:</p>
  
  <pre><code>.web {
  width: 953px;
  height: 150px;
  position: absolute;
  margin-top:40px;
  margin-left:0px;
  z-index:1;opacity:0;
  padding:7px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  
  /*Transition Effect, Thanks css-tricks.com!  */
  -webkit-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  -moz-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  -o-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  -ms-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  }
  .video {
  width: 953px;
  height: 150px;
  position: absolute;
  margin-top:40px;
  margin-left:0px;
  z-index:500;
  overflow:hidden;
  opacity:0;
  padding:7px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  
  /*Transition Effect, Thanks css-tricks.com!  */
  -webkit-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
  -moz-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
  -o-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
  -ms-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
   transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
  }
  .about {
  width: 953px;
  height: auto !important;
  position: absolute;
  margin-top:40px;
  z-index:9000;
  opacity:0;
  padding:7px;
  
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  border-radius: 10px;
  
  /*Transition Effect, Thanks css-tricks.com!  */
    -webkit-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
    -moz-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
    -o-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
    -ms-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
      transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear,            margin-top 1.5s ease, margin-left 0.9s ease;  
  
  /*Classes that Div's take once clicked*/
  .prime{
  width: 953px;
  height: 750px;
  background:rgba(255,255,255,.9);
  margin-left:0px;
  position: absolute;
  margin-top:75px;
  z-index:9001;
  opacity:1;
  overflow:auto;   
  }
  
  .third{
   width: 953px;
  height: 200px;
  opacity: 0.0 !important;
  position: absolute;
  margin-top:-499px;
  margin-left:1810px;
  z-index:1;
  overflow:hidden;  
  }
  
  .secondary{
  width: 953px;
  height: 200px;
  opacity: 0 !important;
  position: absolute;
  margin-top:499px;
  margin-left:-1810px;
  z-index:500;
  overflow:hidden;   
  }
  </code></pre>