title: Two fixed position divs develop margin when viewed on iPad
body: <p>Set up a website at www.fleetwoodlifecoaching.co.nz and everything looks great when viewed from a desktop computer, however when I view the website from my iPad an odd white space appears between two fixed position divs that make up the nav bar and heading areas (see screenshot).  They've been positioned pretty precisely and clearly the way iPad decodes this breaks it - what's the best way to get around this?</p>
  
  <p>Thanks in advance for your help</p>
  
  <p>Apparently I don't have enough reputation to post an image so here's an imgur link. <a href="http://imgur.com/0PEn41r" rel="nofollow">http://imgur.com/0PEn41r</a></p>
  
  <p>EDIT: So basically I have two divs that are right up against one another, one called nav that runs down the left side and another called header that runs along the top.  Below is the CSS for each:</p>
  
  <pre><code>#nav {
  position: fixed;
  margin-left: -8px;
  margin-top: -17.5px;
  padding-left: 40px;
  width: 140px;
  height: 100%;
  background: #8E8074;
  list-style: none;
  z-index: 7;
  }
  
  #header {
  position: fixed;
  width: calc(100% + 16px);
  height: 100px;
  background-color: #8E8074;
  margin-left: -8px;
  margin-top: -120px;
  padding-bottom: 3px;
  z-index: 6;
  }
  </code></pre>