meta name="viewport" and @media: activate CSS based upon width of actual page

Question

Edit: found a grave mistake on my part int he code, nothing relevant for others with the same problem, I simply had a missing "}" on a media query above the ones not working.

Please explain like I am 5.

So I am trying to get my page to shuffle around some margins, change some floats and generally be responsive. I can't seem to get it to work. Basically what I want is for the CSS inside a @media query to toggle when the width of the browser window, not the device screen width, hits a certain mark. Right now that is not working. I figured that I'd use the cascading nature of CSS to override the fact that all of the @media CSS should be active when below the lowest max-width. This does not seem to be the case, instead I get the CSS from the 1600px one at some much lower resolution.

So I read up, and the more I read the more confused I get. Please help!

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

CSS

@media (max-width: 1600px ) {
    .container .block_people .person{
        margin: 0 0 500px 0;
    }
}
@media (max-width: 1400px ) {
    .block_people .person{
        margin: 0 0 100px 0;
    }
}
@media (max-width: 1200px ) {
    .block_people .person{
        margin: 0 0 100px 0;
    }
}
@media (max-width: 1000px){
    .container {
        width: 100%;
        margin: 0 auto;
        padding: 0 0.5%;
    }
    .block_people .person{
        margin: 0 0 100px 0;
    }
}
@media (max-width: 800px ) {
    .block_people .person{
        min-width: 300px;
        width: 90%;
        float: left;
        margin: 0 0 150px 0;
        display: inline-block;
    }
}
@media (max-width: 600px ) {
    .buttons {
        right: 225px;
    }
     nav.slide-menu-right{
        width: 200px;
    }

}

Answer 1

Your CSS looks relatively complex to me. Another way you could write your media queries is below, this approach may help you target styles and viewports more easily:

@media (max-width: 600px) {
}

@media (min-width: 601px) and (max-width: 800px) {
}

@media (min-width: 801px) and (max-width: 1000px) {
}  
etc

If you want to try and get cascading to work, I usually set any default styles then build up from narrow to wide viewports. Doing it this way means that if you have set a style at a narrow viewport, you can easily override it at wider viewports (because the style will be further down the style sheet) e.g.

/* start with default styles */  

@media (min-width: 601px ) { .... }  
@media (min-width: 801px ) { .... }  
@media (min-width: 1001px ) { .... }  
@media (min-width: 1201px ) { .... }  
@media (min-width: 1401px ) { .... } 

Good luck!