CSS3 Media Query not affecting class width -

i'm working css media queries responsive web design. keep them organized , easy access, i'm declaring of media queries @ top of css document, this:

* {margin:0 auto; padding: 0;} body {margin: 0; padding: 0; font: normal 100% helvetica, arial, sans-serif; color: #fff; background: url(../img/defaultnav.jpg); background-repeat: repeat-x;} h1 {font-size: 5.75em; font-weight: 800; text-align: center} h2 {font-size: 2.5em; font-weight: 300; text-align: center; line-height: 50px;} h3 {font-size: 2.5em; font-weight: 100; line-height:50px; color: #666;} h4 {font-size: 1.25em; font-weight: 100; color: #999; margin-top: 10px; margin-bottom:18px;} p {font-size: 1em; color: #999;} {color: #999; text-decoration: none;} a:hover {text-decoration: underline;}  @media screen , (min-width: 1700px) {                                          h1 {font-size: 6.2em;}                                         h2 h3 {font-size: 3.5em;}                                         h4 {font-size: 2.5em;}                                         p {font-size: 2em;}                                         /*.content {max-width: 80em;}*/                                       } @media screen , (max-width: 780px) {  /*.column {float: none; width: auto;}*/ } @media screen , (min-width: 681px) {  .mobilebar, .nav {display: none;}   } @media screen , (max-width: 680px) {  .header .title h1 {font-size: 2.5em;}   h2 {font-size: 1.5em;}  .headersmall .title h1 {font-size: 2.5em;}  } @media screen , (max-width: 500px) {  p {text-align: left;}   } @media screen , (max-width: 320px) {                                         * {text-align: left;}                                         h1 { font-size: 2.5em;}                                         h2 {font-size: 1.2em;}                                         h3 {font-size: 1.6em; line-height: normal; text-align: center;}                                         h4 {font-size: 1.4em; text-align: center;}                                         .content .contenttitles img {display: none;}                                      } 

the queries work fine, except 2 have commented out above. (under first 2 queries) 2 queries work if write them under classes trying affect i.e.:

.content { margin:auto; padding:1em 2em; max-width:35.75em; height:inherit; } @media screen , (min-width: 1700px) {    .content {max-width: 80em;}    } 

i don't understand why doing this. i've tried researching here on stack , general google searching can't find results. it's frustrating because keeping code organized. if has idea why happening i'd appreciate help. i'm testing on latest versions of safari , firefox , safari ios if makes difference.

well, max-width: 35.75em in .content rule overriding rule media query. because comes later. that's how cascade works.

how group , order media query rules you, don't kind of special priority on rules coming later, , can overridden other css rule.

your browser's style inspector show styles being applied and/or overridden. know how use it?