title: max-width:100% not working on images in mozilla
body: <p>I am designing a responsive website for a client where the image needs to be resized according to the width of screen.
  I set the image to max-width:100% and height:auto and it's working perfectly in chrome but not in mozilla.</p>
  
  <p>Here is the link <a href="http://touchtalent.cloudvent.net/" rel="nofollow noreferrer">http://touchtalent.cloudvent.net/</a></p>
  
  <p>Also, there is a similar question at 
  <a href="https://stackoverflow.com/questions/14550356/image-mysteriously-ignoring-max-width-in-firefox-ie">Image mysteriously ignoring max-width in Firefox &amp; IE</a></p>
  
  <p>And, according to it's answer, I tried to give it's parent a width of 100%, but that doesn't help.</p>
  
  <p>Here is my HTML code</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
     &lt;header&gt;
          &lt;section class="banner1"&gt;
              &lt;img class="banner" src="img/banner1.jpg" alt="banner1"/&gt;
              &lt;div class="tag1"&gt;
              BECAUSE YOU HAVE 
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;section class="banner2"&gt;
              &lt;img class="banner" src="img/banner2.jpg" alt="banner2"/&gt;
          &lt;/section&gt;
          &lt;section class="banner3"&gt;
              &lt;img class="banner" src="img/banner3.jpg" alt="banner3"/&gt;
              &lt;div class="tag2"&gt;
              A 
              &lt;/div&gt;
              &lt;div class="tag3"&gt;
              CREATIVE GENIUS
              &lt;/div&gt;
              &lt;div class="tag4"&gt;
              INSIDE YOU
              &lt;/div&gt;
              &lt;div class="tag5"&gt;
                  &lt;div class="btn_join"&gt;
                  JOIN US 
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
     &lt;/header&gt;
  &lt;/div&gt;&lt;!--wrapper--&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is its CSS</p>
  
  <pre><code>* {
  float: left;
  }
  
  
  header {
  max-width: 100%;
  }
  
  
  img.banner {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  
  .banner1, .banner2, .banner3 {
    max-width: 100%;
    position: relative;
  }
  
  
  .tag1, .tag2, .tag4, .tag3, .tag5 {
    width: 100%;
    font-family: "HeroLight", sans-serif;
    font-size: 40px;
    color: #FFF;
    position: absolute;
    text-align: center;
    left: 0px;
    bottom: 20px;
    height: 40px;
  }
  
  
  .tag2 {
    top: 20px;
  }
  
  
  .tag4 {
    top: 160px;
  }
  
  
  .tag3 {
    top: 70px;
    font-family: "sixties", sans-serif;
    font-size: 80px;
  }
  
  
  .tag5 {
    bottom: 60px;
  }
  
  .tag5 .btn_join {
    background: #FFF;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    border-radius: 40px;
    color: #000;
    font-size: 23px;
    font-family: "HeroLight", sans-serif;
    width: 198px;
    height: 53px;
    line-height: 60px;
    position: relative;
    left: 50%;
    margin-left: -99px;
    cursor: pointer;
  }
  
  @media screen and (min-width: 500px) and (max-width: 1200px) {
  
  .tag1, .tag2, .tag4, .tag3, .tag5 {
  width: 100%;
  font-family: "HeroLight", sans-serif;
  font-size: 25px;
  color: #FFF;
  position: absolute;
  text-align: center;
  left: 0px;
  bottom: 0px;
  height: 40px;
  }
  
  
  .tag2 {
   top: 15px;
  }
  
  
  .tag4 {
  top: 100px;
  }
  
  
  .tag3 {
  top: 45px;
  font-family: "sixties", sans-serif;
  font-size: 50px;
  }
  
  
  .tag5 {
   bottom: 25px;
  }
  
  .tag5 .btn_join {
   background: #FFF;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
   -o-border-radius: 40px;
   border-radius: 40px;
   color: #000;
   font-size: 23px;
   font-family: "HeroLight", sans-serif;
   width: 198px;
   height: 53px;
   line-height: 60px;
   position: relative;
   left: 50%;
   margin-left: -99px;
   cursor: pointer;
   }
   }
   @media screen and (min-width: 1201px) and (max-width: 1400px) {
  
     .tag1, .tag2, .tag4, .tag3, .tag5 {
       width: 100%;
       font-family: "HeroLight", sans-serif;
       font-size: 35px;
       color: #FFF;
       position: absolute;
       text-align: center;
       left: 0px;
       bottom: 15px;
       height: 40px;
     }
  
  
     .tag2 {
       top: 15px;
     }
  
  
    .tag4 {
       top: 125px;
     }
  
  
     .tag3 {
       top: 55px;
       font-family: "sixties", sans-serif;
       font-size: 60px;
     }
  
  
     .tag5 {
       bottom: 25px;
     }
  
     .tag5 .btn_join {
       background: #FFF;
       -webkit-border-radius: 40px;
       -moz-border-radius: 40px;
       -ms-border-radius: 40px;
       -o-border-radius: 40px;
       border-radius: 40px;
       color: #000;
       font-size: 23px;
       font-family: "HeroLight", sans-serif;
       width: 198px;
       height: 53px;
       line-height: 60px;
       position: relative;
       left: 50%;
       margin-left: -99px;
       cursor: pointer;
     }
   }
  
   #wrapper {
     width: 100%;
     min-width: 1000px;
     overflow: hidden;
   }
  </code></pre>
  
  <p>Please help!</p>