fixed width html layout on an android smart phone -

i'm trying build simple layout header there's black band full width of screen, inside there's meant logo, little text etc... should contained within fixed width column centered in middle of screen.

underneath there's fixed column again centered it's not wrapped in anything.

so i've built think should work , looks fine on pc on android smart phone there's weird problem. if make fixed width 1000px wide header develops strange gap on right hand side. can't figure out why.

you can see problem here if have smart phone http://liquidlizard.net/narrower.php - click between 2 links. difference in 1 screen fixed width wrapper 1000, other 900px.

here's code:

<div id="header">     <div class="mainwrapnarrow">         <div class="font16">belfast<span class="strong">development</span></div>     </div> </div>  <div class="mainwrapnarrow border">     <a href="narrower.php">narrower</a>     <br/><br/>     <a href="index.php">wider</a> </div> 

and css:

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;} 

and couple of screen shots attached check out white gap on right of screen on second picture

you setting black background on header div. header div smaller (980px) mainwrap div why have gap of 20px.

the header div 980px wide because

most web browsers on android (including chrome) set viewport large size default (known "wide viewport mode" @ 980px wide)

http://developer.android.com/guide/webapps/targeting.html

if trying build responsive site should start adding viewport meta

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

and use media-queries make divs 100% of screen on mobile devices , give them desired width on desktop screens