title: iPad CSS Page Width
body: <p>I'm having some issues with my page and header on the iPad vs desktop.</p>
  
  <p>When you look at <a href="http://www.photopile.me" rel="nofollow noreferrer">http://www.photopile.me</a> on the computer, the pictures and header/footer should stretch 100% of the way to the edge.
  <img src="https://i.stack.imgur.com/18F26.png" alt="enter image description here"></p>
  
  <p>When you go to it on the iPad, it doesn't show the full width of the page and the 100% header gets resized. I'd like the ipad to show the full width of the page.
  <img src="https://i.stack.imgur.com/1whiM.jpg" alt="enter image description here"></p>
  
  <p>I'm just getting started optimizing for iPad, but what am I missing?  I'm sure there's a stupid little rule I'm missing.  Here is the header HTML</p>
  
  <pre><code>&lt;header&gt;
      &lt;div id="header-wrapper"&gt;
          ... header content ...
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;div id="page-content"&gt;
          .... photos ....
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS</p>
  
  <pre><code>header {
      background: url('../images/header-bg.jpg') repeat-x top left;
      z-index: 500;
      -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
      -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
      box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
      position: fixed;
      top: 0;
      width: 100%;
  }
  #header-wrapper {
      padding: 10px;
      position: relative;
  }
  #page-content {
      margin: 0 auto;
      z-index: 400;
      position: relative;
      margin-top: 91px;
      overflow: hidden;
  }
  </code></pre>
  
  <p>Hope that's enough info!</p>