html - Media queries not relating to pixels on website -

i'm building responsive site when resize window media queries aren't corresponding screen resolution, instance,
@media screen , (min-width:640px) , (max-width: 800px) resulting in these design elements when screen above 800 pixels , when i'm @ 700 pixels designs being set @media screen , (min-width: 400px) , (max-width:640px) reason. know why happening?

update: max-width 640px media query being set screen @ on 700 pixels still.   @media screen , (max-width: 1024px)  {  .body{     width:800px; } 

}

@media screen , (max-width: 800px) {      .body {         width:600px;     }  }  @media screen , (max-width:640px) {      .body {         width:480px;     } }  @media screen , (max-width:400px) {  .body {     width:260px; } 

}

to start troubleshooting, double check in head of document have

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

let me know how on.

edit

thanks code. check out this working example. css , order of media queries below:

/* set default  */ .body{     width:800px;   }  @media screen , (max-width:400px) {   .body {     width:260px;   } }  @media screen , (min-width: 401px) , (max-width:640px) {      .body {       width:480px;     } }    @media screen , (min-width: 641px) , (max-width: 800px) {      .body {        width:600px;     } }  @media screen , (min-width: 801px) , (max-width: 1024px)  {    .body{     width:800px;    } }