title: Div remains same width when rotating ipad from portrait to landscape
body: <p>I'm currently developing my first web app and have come up against a problem. When the app is opened the navigation div along the bottom (pictured below) renders fine, same when I rotate the iPad to portrait. But when I rotate from portrait to landscape it seems to maintain the same width, at least until I touch the screen. It’s not a massive problem as it returns to its normal state when I start scrolling but it’s a bit untidy looking. I've attached a few images:</p>
  
  <p>Portrait:<br>
  <img src="https://i.stack.imgur.com/vHGku.jpg" alt="enter image description here"></p>
  
  <p>After rotating from Portrait to Landscape:
  <img src="https://i.stack.imgur.com/bMh0J.jpg" alt="enter image description here"></p>
  
  <p>This is the CSS I'm using for that div:</p>
  
  <pre><code>nav {background-image: linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
      background-image: -o-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
      background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
      background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
      background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
      background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.15, rgb(0,0,0)),
      color-stop(0.69, rgb(51,51,51)));
      border-top: 1px solid #000;
  
      text-align: center;
      position: fixed;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 51px;
      color:#CCC;
      font-size:11.3px;
      font-weight:bold;
      overflow: hidden;
      margin: 0 auto 0;}
  </code></pre>
  
  <p>Is there a way of getting round this and having the div automatically fill the width of the screen without the user touching it?</p>