javascript - Disable Horizontal Scrolling on Mobile Webpage -

I have found this simple mobile webpage that I am trying to create, just like a facebook menu. I am trying to disable horizontal scrolling with CSS overflow-X: hidden, but it is not working. Here's my code, any help would be greatly appreciated:

  & lt; Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = not" & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script & gt; $ (Document) .ready (function () {$ ("button"). Click (function () {var win = $ ("# right-side"); var status = win.position (); // alert ("Left:" + position.left + ", top:" + position.top); if (position. Left & lt; 100) {$ ("# right-side"). Animate ({left: '250px '});} And {$ ("# on right"). Animate ({left:' 0px '});}});}); & Lt; / Script & gt; & Lt; Style & gt; Body {overflow-x: hidden; Font-family: sans-serif;} # right side {background: # BFC7D8 ;; Left: 0; Top: 0; Height: 100%; Width: 100%; Status: Completed; } # Left menu {background: # 323949; Left: 0; Top: 0; Height: 100%; Width: 250px; Status: Completed; } #Navigation {font-size: 20px; Width: 250px; Padding-top: 100px; } #navigationUntil {margin: 0px; Padding: 0px; } #navigation li {List-style: none; } Ul.top-level li> A {display: block; Border bottom: 1 px solid RGBA (0,0,0, 0.1); Border-top: 1 px solid RGBA (255, 255, 255, 0.1); Padding: 15px; Lesson: 0 1 px 0 000; Text-decoration: None; Color: #ccc; Text indent: 20px; } #Tolbar {width: 100%; Height: 50px; Background: # 00F; } & Lt; / Style & gt; & Lt; Div id = "left-menu" & gt; & Lt; Div id = "navigation" & gt; & Lt; Ul class = "top-level" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; About & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; FAQ & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; News & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "right-side" & gt; & Lt; Div id = "toolbar" & gt; & Lt; Button & gt; Menu & lt; / Button & gt; & Lt; / Div & gt; & Lt; H1 & gt; This is a test & lt; / H1> & Lt; / Div & gt;    
 
 
 I have put your code in Bella but I can not add 'zoom' The meta tag on the head, so it's hard to test on my phone  
 It seems to work fine on the desktop, no scrollbars.  
 I've added the following for your CSS:  
  body {overflow-x: hidden; Font-family: sans-serif; / * Added: * / max-width: 100%; Height: 100%; }   
 Not sure that it will make a difference, but it is worth a try ...