title: Removing white bar from top of page
body: <p>I have the following code, with the html and body margins and padding set to zero, but their is still a gap at the top, why?:</p>
  
  <p><img src="https://i.stack.imgur.com/1Ri2Y.png" alt="enter image description here"></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
      margin: 0;
      padding: 0;
  }
  
  .mobile body {
      overflow: hidden;
  }
  
  .mobile #wrapper {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
  }
  
  .mobile #scroller {
      height: 3000px;
  }
  
  
  .header {
      background: url(../img/dark_exa.png) repeat;
      height: 300px;
      margin: 0 auto;
      text-align: center;
  }
  
  .header h1 {
      color: white;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /&gt;
          &lt;title&gt;Mobile Parallax with Stellar.js - Demo&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/normalize.css" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id="wrapper"&gt;
              &lt;div id="scroller"&gt;
  
                  &lt;div class="header"&gt;
                      &lt;h1&gt;Product Title&lt;/h1&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script src="lib/jquery.min.js" &gt;&lt;/script&gt;
          &lt;script src="lib/jquery.stellar.min.js"&gt;&lt;/script&gt;
          &lt;script src="lib/iscroll.js"&gt;&lt;/script&gt;
          &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>