css - Multiple media queries for different sizes not working -

i working on making site responsive , able respond medium / large table sizes using following media query:

@media (max-width: 1280px) {     .nav-tab {         display: none;     }      .nav-drawer-button {         display: block;         float: left;         padding-top: 30px;         margin-left: 80%;         cursor: pointer;     }      .panel-title {         width: 40%;         font-size: 24px;     }      .panel-text {         width: 70%;     }      .footer-text {         padding-top: 15px;     }      .social:first-child {         margin-right: 1em;     } } 

there problem on screens 600px - 650px in size created query after 1 looking like:

@media (min-width: 600px) , (max-width: 650px) {     .nav-drawer-button {         margin-left: 70%;     } } 

this doesn't appear work. applies first media query. tried changing order of queries, did not work. doing wrong?

here whole css:

@import url(http://fonts.googleapis.com/css?family=roboto:500); @import url(http://fonts.googleapis.com/css?family=open+sans);  body {     margin: 0;     background-color: #eeeeee; }  footer {     margin: 0;     height: 3em;     background-color: #333333;     /*border-top: 3px solid #338a6c;*/ }  .navbar {     height: 6em;     margin: 0;     background-color: #333333;     border-bottom: 5px solid #338a6c;     box-shadow: 2px 2px 5px #333333;     list-style: none; }  .nav-drawer-button {     display: none; }  .nav-drawer {     display: none; }  .nav-tab {     height: 100%;     float: left;     color: #eeeeee;     padding-left: 2em;     padding-right: 2em;     text-align: center;     font-family: "open sans", sans-serif; }  .nav-tab:nth-child(2) {     margin-left: 55%; }  .nav-tab:hover {     border-left: 1px solid #555555;     border-right: 1px solid #555555;     background-color: rgba(85, 85, 85, .3);     cursor: pointer; } .nav-logo {     margin-left: 1em;     padding-top: 25px;     float: left; }  .nav-logo:hover {     cursor: pointer; }  .nav-text {     padding-top: 5px; }  .bg {     fill-opacity: 0.1;     background-attachment: fixed;     background-repeat: no-repeat;     background-size: cover;     width: 100%;     height: 500px;     text-align: center; }  .bg-1 {     background-image: url("../img/para1.jpg"); }  .bg-2 {     background-image: url("../img/para2.jpg"); }  .bg-3 {     background-image: url("../img/para3.jpg");     height: 300px; }  .bg-text {      margin: 0;     padding-top: 250px;     font-family: "roboto", sans-serif;     font-size: 36pt;     color: #eeeeee;     text-shadow: 2px 2px 2px #222222; }  .bg-3>.bg-text {     padding-top: 150px; }  .fg {     border-top: 3px solid #338a6c;     border-bottom: 3px solid #338a6c;     background-color: #eeeeee;     width: 100%;     height: 610px; }  .panel-title {     width: 20%;     color: #222222;     font-family: "roboto", sans-serif;     font-size: 36px;     border-bottom: 3px solid #aaaaaa;     margin-left: auto;     margin-right: auto;     margin-bottom: 1em;     padding-left: auto;     padding-right: auto;     padding-top: 0.5em;     padding-bottom: 20px;     text-align: center; }  .panel-text {     /* see: util.js */     /*opacity: 0;*/     width: 50%;     color: #333333;     font-family: "open sans", sans-serif;     font-size: 16px;     font-weight: 500;     margin-left: auto;     margin-right: auto;     text-align: justify; }  .button {     width: 8em;     height: 2em;     font-size: 16pt;     font-family: "roboto", sans-serif;     text-align: center;     padding-top: 1em;     margin-top: 3em;     margin-left: auto;     margin-right: auto;     border: 2px solid #338a6c;     border-radius: 5px;     background-color: transparent;     color: #338a6c; }  .button:hover {     border: 2px solid #338a6c;     background-color: #338a6c;     color: #eeeeee;     cursor: pointer; }  .gap {     margin-left: 5px; }  .social-icons {     height: 100%;     list-style: none;     margin: 0; }  .social {     float: right;     font-size: 14pt;     color: #eeeeee;     height: 68%;     width: 3em;     padding-top: 15px;     padding-bottom: 0;     text-align: center; }  .social:hover {     border-left: 1px solid #555555;     border-right: 1px solid #555555;     color: #338a6c;     background-color: rgba(85, 85, 85, .3);     cursor: pointer; }  .social:first-child {     margin-right: 4em; }  .footer-text {     margin: 0;     float: left;     font-size: 10pt;     font-family: "open-sans", sans-serif;     color: #eeeeee;     width: 20em;     text-align: center;     padding-top: 20px; }  .footer-gap {     border-top: 5px solid #338a6c;     background-color: #eeeeee;     height: 0.3em; }  /* small tablet / phablet */ @media (min-width: 600px) , (max-width: 600px) {     .nav-drawer-button {         margin-left: 10%;     } }  /* tablet stuffz */ @media (max-width: 1280px) {     .nav-tab {         display: none;     }      .nav-drawer-button {         display: block;         float: left;         padding-top: 30px;         margin-left: 80%;         cursor: pointer;     }      .panel-title {         width: 40%;         font-size: 24px;     }      .panel-text {         width: 70%;     }      .footer-text {         padding-top: 15px;     }      .social:first-child {         margin-right: 1em;     } } 

first of html needs have viewport set in <head> section.

next - applying of first media query screens maximum width of 1280px, 1280px or smaller. use @media screen (max-width: 651px) , (min-width:1280px) instead.

for smaller screensizes code seems correct.

edit

the order has effect on display when several queries applied same screen settings. it's common start @ largest screen setting , work way down smallest, way reflecting changes each time rather including every change in every media query.