Multiple media queries for different sizes not working

Question

I am currently working on making my site responsive and was able to get is to respond to medium / large table sizes by using the 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 is a problem on screens that are 600px - 650px in size so I created another query after that one looking like:

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

This doesn't appear to work. It applies the first media query. I tried changing the order of the queries, but it did not work. What am I doing wrong?

Here is the 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) and (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;
    }
}

Answer 1

First of all your HTML needs to have the viewport set in the <head> section.

Next - you are applying all of the first media query for screens with a maximum width of 1280px, so 1280px or smaller. Use @media screen (max-width: 651px) and (min-width:1280px) instead.

For smaller screensizes your code seems correct.

Edit

The order only has an effect on display when several queries are applied to the same screen settings. It's common to start at the largest screen setting and work your way down to the smallest, that way you are only reflecting extra changes each time rather than including every change in every media query.