How come my media query styles aren't changing?

I'm trying to test my media query code by adding a background color to the header in my tablet view. When I try and change it back to the desktop view it still stays red even though I didn't include red as a background colour in my desktop view media query.. Can anyone offer any advice?

/* For tablet: */

@media only screen and (min-width: 601px) {
  
    /* Header section  */
 
   header {
        width: 1100px;
        margin: 40px auto;
       background-color: red;
    }
    
    .logo {
        margin-left: 290px;
        margin-top: 80px;
    }
    
    nav {
         margin-top: 60px;
         margin-left: 240px;
            
    }

/for desktop/

@media only screen and (min-width: 992px) {

  .col-l-1 {width: 8.33%;}
  .col-l-2 {width: 16.66%;}
  .col-l-3 {width: 25%;}
  .col-l-4 {width: 33.33%;}
  .col-l-5 {width: 41.66%;}
  .col-l-6 {width: 50%;}
  .col-l-7 {width: 58.33%;}
  .col-l-8 {width: 66.66%;}
  .col-l-9 {width: 75%;}
  .col-l-10 {width: 83.33%;}
  .col-l-11 {width: 91.66%;}
  .col-l-12 {width: 100%;}
    
    
/* Header section  */

    header {
        width: 1100px;
        margin: 40px auto;
    }
    
    .logo {
        margin-left: 290px;
        margin-top: 80px;
    }
    
    nav {
         margin-top: 60px;
         margin-left: 240px;
            
    }