title: CSS Media Queries not Working when changing resolution size of browser window
body: <p>I cant Seem to get these two queries to work together.  It seems whatever I have listed to display in the 'max-width: 1360' overrides what I have to display for 990px.  The media queries for the 990px wont overwrite anything that is defined in the 1360px queries.  I did a work around for the footer, but I don't think that is the way the system was designed.  I've done a bit of research, but I can't find anyone that is able to explain why this isn't working:</p>
  
  <pre><code>@media screen and (max-width: 990px)    {
  #header {width: 990px; display: inherit;}
  #header_info {width: 990px;}
  #border_header {width:990px;}
  #contact_data { display: none;}
  #contact_data1 {width: 990px; display: inherit;}
  #contact_data1 img {float: left; }
  #contact_info {width: 990px;}
  #wrapper {width: 990px; float: left; }
  #container {width: 990px; float: left; }
  #left_window {width: 200px; float: left;  }
  #left_window a {font-size:20px;}
  #content {width: 687px; }
  #right_window {display:none}
  
  
  
  #footer {display:none;}
  #footer_content {display:none;}
  #footer_container {display:none;}
  #footer_content_left {display:none;}
  #footer_content_center {display:none;}
  #footer_content_right {display:none;}
  
  
  
  #footer1 {width: 990px; display:inherit;}
  #footer_content1 {width: 990px; display:inherit;}
  #footer_container1 {width: 990px; display:inherit;}
  #footer_content_left1 {width: 150px; display:inherit;}
  #footer_content_center1 {width: 150px; display:inherit;}
  #footer_content_right1 {width: 150px; display:inherit;}
  
  
  #product_listing {margin-left: 55px; }
  
  #breakgarage {display: inherit;}
  
  
  
  }
  
  
  
  
  
  @media screen and (max-width: 1360px)    {    
  #footer {width: 1360px;}
  #footer_content {width: 1360px;}
  #footer_container {width: 1360px;}
  #footer_content_left {width:330px;}
  #footer_content_center {width: 330px;}
  #footer_content_right {width: 330px;}
  
  #header {width: 100%;}
  #header_info {width: 1360px;}
  #border_header {width:1360px;}
  #contact_data {width: 1360px;}
  #contact_data img {float: left;}
  .contact_data_space {padding-left: 75px;}
  #contact_info {width: 1360px;}
  #wrapper {width: 1360px;}
  #container {width: 1360px;}
  
  contact_info img {width: 50%}
  
  }
  </code></pre>