title: Webpage displaying correctly in chrome, not in firefox
body: <p>As shown in the images, the background image of my webpage fits on chrome, but for some reason, the image does not scale correctly in firefox even though the window sizes are the same. Worse yet, when I shrink the window width, it does not scale well at all. How am I supposed to know the window size of the browser someone is using?</p>
  
  <p>UPDATE here are the images. First is chrome, second is firefox</p>
  
  <p><a href="https://www.flickr.com/photos/125343138@N07/24491082235/in/dateposted-public/" rel="nofollow">https://www.flickr.com/photos/125343138@N07/24491082235/in/dateposted-public/</a></p>
  
  <p><a href="https://www.flickr.com/photos/125343138@N07/24464890356/in/dateposted-public/" rel="nofollow">https://www.flickr.com/photos/125343138@N07/24464890356/in/dateposted-public/</a></p>
  
  <p>Here is the stylesheet</p>
  
  <pre><code>.nav {
  
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: fill;
  overflow: hidden;
  background-color: #333;
  }
  
  .nav li {
  
  display: inline;
  padding: 20px 10px;    
  }
  
  .nav li a {
  
  color: whitesmoke;
  padding: 14px 190px;
  font-family: 'futura';
  font-size: 16px;
  position: relative;
  top: 5px;
  
  }
  
  .jmb {
  
  background-image: url('https://farm2.staticflickr.com /1600/24149223706_da584c8c45_o.jpg');
  height: 100%;
  width: 100%;
  position:absolute;
  background-repeat: no-repeat;
  background-size:contain;
  background-position: 00px 37px;
  }
  
  .jmb h5 {
  
    font-family: 'Yellowtailregular';
    font-size: 105px;
    color: black;
    margin-top: 170px;
    margin-left: 190px;
    -webkit-animation-delay: 1s;
    -webkit-animation-duration: 4s;
  
  }
  
  .jmb div p
  {
  font-size: 27px;
  font-family: 'futura';
  margin-left: 110px;
  margin-top: -24px;
  word-wrap: break-word; 
  width: 27%;
  -webkit-animation-delay: 2s;
  -webkit-animation-duration: 4s;    
  
  }   
  </code></pre>