title: fixed width html layout on an android smart phone
body: <p>I'm trying to build a simple layout where for the header there's a black band the full width of the screen, inside which there's a meant to be my logo, a little text etc... which should be contained within a fixed width column which is centered in the middle of the screen.</p>
  
  <p>Underneath that there's a fixed column which is again centered but it's not wrapped in anything.</p>
  
  <p>So I've built what I think should work and it looks fine on my PC but on my android smart phone there's a weird problem. If I make the fixed width 1000px wide then the header develops a strange gap on the right hand side. I can't figure out why.</p>
  
  <p>you can see the problem here if you have a smart phone <a href="http://liquidlizard.net/narrower.php" rel="nofollow noreferrer">http://liquidlizard.net/narrower.php</a> - just click between the two links. The only difference is in one screen the fixed width wrapper is 1000, the other 900px.</p>
  
  <p>here's my code:</p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;div class="mainWrapnarrow"&gt;
          &lt;div class="font16"&gt;Belfast&lt;span class="strong"&gt;development&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="mainWrapnarrow border"&gt;
      &lt;a href="narrower.php"&gt;Narrower&lt;/a&gt;
      &lt;br/&gt;&lt;br/&gt;
      &lt;a href="index.php"&gt;wider&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>body {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 35px;
          margin: 0px;
          padding: 0px;
      color:#ffffff;
  }
  
  .left{float:left;}
  .right{float:right;}
  .strong{font-weight:bold;}
  .border{border:1px solid#999;}
  .font16{font-size:16px;}
  
  #header{background:#000000; border-bottom:1px solid #4e4b60; line-height:100px;width:100%}
  
  .mainWrap {width:1000px; margin:0 auto;}
  .mainWrapnarrow {width:900px; margin:0 auto;}
  </code></pre>
  
  <p>and a couple of screen shots attached Check out the white gap on the right of the screen on the second picture</p>
  
  <p><img src="https://i.stack.imgur.com/KeeM6.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/WTqy6.png" alt="enter image description here"></p>