Media Query Troubles

Original.css

/* 
Styles only apply to 1224px wide, if we go below that, these styles stop applying.
If we fall below 1224px wide, suddenly all of our header styles disappear, which is bad news bears for us.
*/
@media only screen and (min-width : 1224px) {
	
	h3 { margin: 50px auto; }
	h3:first-child { margin-top: 0; }
	header{
 background-color:#f3f2f5;
 background-image:url(../images/green.jpg);
 height:800px;
 width:100%;
 background-size:cover;
 background-repeat: no-repeat;
 background-position: center;
 overflow:hidden;
}

Refined.css

/* This is the example of desktop first design - WWTD (What would Trevor Do) 
  Note that the order of the media queries start from the widest screen first and then cascade down to the smallest.
  ORDER IS IMPORTANT, as you want the styles to override in the correct manner. We always cascade/override from top-down.
*/

header { /* We pull the default header styles out of the media query so they apply FIRST. We adapt for smaller screens after */
   background-color:#f3f2f5;
   background-image:url(../images/green.jpg);
   height:800px;
   width:100%;
   background-size:cover;
   background-repeat: no-repeat;
   background-position: center;
   overflow:hidden;
}
/* For this example we're also going to pull out the other min-width items as a default style */
h3 { margin: 50px auto; }
h3:first-child { margin-top: 0; }



@media screen and (max-width : 1224px) { /* This query covers everything below 1224px */
	
  header {
    height: 500px;  
  }
	
}

@media screen and (max-width: 768px) { /* Styles below 769px...phone territory */

  header {
    height: 300px;
  }
  /* Some other styles for fonts, margins, or whatever needs to be changed to make menu fit */

}

@media screen and (max-width: 480px) { /* Styles below 481px...most phones and smaller handsets */

  header {
   height: 200px; 
  }
  /* Other styles */
 
}