Responsive CSS is not working but works half way - css

Question

Hi guys I am having a problem with my responsive CSS. It is working fine with max-width:321px but not when I try to do max-width:500px. I am trying to understand why and what I am doing wrong. Please help...
/*/Mobile MAINCSS/*/
img {
max-width: 100%;
height: auto;
}
#media screen and (max-width: 320px) {
/*/Nav and Header/*/
iframe {
width: 100%;
height: 700px;
}
body {
color: red;
}
#nav {
display: none;
width: 100%;
}
#logomain {
width: 100%;
height: auto;
display: none;
}
.logo {
display: none;
}
.logoright {
display: none;
}
.mobile-number {
display: block;
text-align: center;
background:#333399;
}
.mobile-number a:link {
color: red;
text-decoration: none;
}
.mobile-number a:visited {
color: red;
text-decoration: none;
}
#head_wrap {
width: 100%;
height: auto;
}
#head {
width: 100%;
height: auto;
}
/*/Mobile Navigation/*/
#mobilenav {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
background: #333399;
color: white;
font-size: 18px;
text-align: center;
}
.mobile ul {
display: inline;
margin: 0 auto;
width: 100%;
height: auto;
}
.mobile ul li {
display: inline-block;
padding: 10px;
}
.mobile a:link {
color: white;
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 1px black;
border-radius: 5px 5px 5px 5px;
padding: 5px;
}
.mobile a:visited {
color: white;
}
}
/*/Content/*/
#content {
width: 100%;
height: auto;
}
#content_wrapper {
width: 100%;
height: auto;
}
#bizmain {
width: 100%;
height: auto;
}
.bizexpress {
float: none;
}
.bizpro {
float: none;
}
.pro {
float: none;
}
/*/Footer/*/
#footer {
width: 100%;
height: auto;
}
/*/Additional Updates 02/28/2015/*/
.main-right {
width: 100%;
height: auto;
text-align: center;
}
.main-left {
width: 100%;
height: auto;
float: none;
text-align: center;
}
.form {
width: 100%;
height: auto;
}
.form-control {
width: 50%;
}
.input-group-addon {
font-size: inherit;
}
/*/Website Design/*/
.evoke {
width: 100%;
height: auto;
}
.evokeemotions {
width: 100%;
height: auto;
}
.resource1 {
float: none;
text-align: center;
}
.resource2 {
float: none;
text-align: center;
}
.resource3 {
float: none;
text-align: center;
}
}

Answer 1

#media screen and (max-width: 500px)
{
}
#media screen and (max-width: 320px)
{
}
You are right no problem please. place 500px Css above 300px