title: Why is the background color disappearing?
body: <p>Take a look at the #header container at <a href="http://granthoneymoon.com/temp.html" rel="nofollow">http://granthoneymoon.com/temp.html</a></p>
  
  <p>At the browser widths of 360 to 499 the background color of the #header disappears and I have no idea why. It's basically the same css as the other widths! It works fine in dreamweaver, but when actually viewed in a browser (IE or Firefox) the problem surfaces. Any clues as to what's going on???</p>
  
  <pre><code>@media screen and (min-width: 500px) and (max-width: 954px)  {
      #header {
      background-color: #18436C;
      min-height: 10px;
      overflow: hidden;
  }
  }
  @media screen and (max-width: 499px) and (min-width: 360) {
  #header {
      background-color: #18436C;
      width: 100%;
      min-height: 10px;
      overflow: hidden;
  }
  }
  @media screen and (max-width: 359px) {
  #header {
      background-color: #18436C;
      width: 100%;
      max-width: 360px;
      min-height: 10px;
      overflow: hidden;
  }
  }
  </code></pre>