title: Why does a horizontal scroll appear in mobile browser(iPhone)?
body: <p>I have coded a html page as follows:</p>
  
  <pre><code> &lt;html&gt;
   &lt;head&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
   &lt;title&gt;Test&lt;/title&gt;
   &lt;/head&gt;
   &lt;body bgcolor="#f2f2f2"&gt;
  
       &lt;div style="width:1000px;height:auto;margin:0px auto;" &gt;&lt;!-- main container --&gt;
           &lt;div style="width:1000px;height:50px;margin:0px auto; background-color:pink;" &gt;&lt;!-- container 2 --&gt;
             Hello world
            &lt;/div&gt; &lt;!-- end container 2 --&gt;
       &lt;/div&gt; &lt;!-- end main container --&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The width of the div is 1000px and it is center aligned using the property margin:0px auto;
  When I view this in the desktop browser, it is fine. But in a mobile browser(iPhone Safari), I get an unwanted horizontal scroll, also the entire page floats hrizontally and diagonally.</p>
  
  <p>Why does this happen? </p>
  
  <p>How can I fix this issue which is specific to iPhone/iPad browser. I have not tested in other mobiles.</p>
  
  <p>What are the code I need to put in to make a mobile browser display a webpage(designed for desktop browser)  properly? </p>
  
  <p>Please suggest.</p>
  
  <p>Thanks</p>