响应式CSS不起作用，但起了一半作用

嗨，伙计们，我的CSS有问题。它在最大宽度为321px时运行良好，但在我尝试执行最大宽度为500px时则不行。我正在努力理解为什么我做错了，我做错了什么。请帮忙

/*/Mobile MAINCSS/*/
img{
最大宽度：100%；
高度：自动；
}
@媒体屏幕和屏幕（最大宽度：320px）{
/*/导航和标题/*/
iframe{
宽度：100%；
高度：700px；
}
身体{
颜色：红色；
}
#导航{
显示：无；
宽度：100%；
}
#logomain{
宽度：100%；
高度：自动；
显示：无；
}
.标志{
显示：无；
}
.logoright{
显示：无；
}
.手机号码{
显示：块；
文本对齐：居中；
背景#333399；
}
.手机号码a：链接{
颜色：红色；
文字装饰：无；
}
.手机号码a：已访问{
颜色：红色；
文字装饰：无；
}
#头套{
宽度：100%；
高度：自动；
}
#头{
宽度：100%；
高度：自动；
}
/*/移动导航/*/
#美孚利纳夫{
显示：块；
保证金：0自动；
宽度：100%；
高度：自动；
背景#333399；
颜色：白色；
字号：18px；
文本对齐：居中；
}
.移动电话{
显示：内联；
保证金：0自动；
宽度：100%；
高度：自动；
}
李国宝{
显示：内联块；
填充：10px；
}
.手机a：链接{
颜色：白色；
文字装饰：无；
字体大小：粗体；
文本阴影：1px 1px 1px黑色；
边界半径：5px 5px 5px；
填充物：5px；
}
.手机a:参观了{
颜色：白色；
}
}
/*/内容/*/
#内容{
宽度：100%；
高度：自动；
}
#内容包装器{
宽度：100%；
高度：自动；
}
#比兹曼{
宽度：100%；
高度：自动；
}
bizexpress先生{
浮动：无；
}
比兹普先生{
浮动：无；
}
专业人士{
浮动：无；
}
/*/页脚/*/
#页脚{
宽度：100%；
高度：自动；
}
/*/其他更新2015年2月28日/*/
.主要权利{
宽度：100%；
高度：自动；
文本对齐：居中；
}
主左{
宽度：100%；
高度：自动；
浮动：无；
文本对齐：居中；
}
.表格{
宽度：100%；
高度：自动；
}
.表格管制{
宽度：50%；
}
.输入组插件{
字体大小：继承；
}
/*/网站设计/*/
.唤起{
宽度：100%；
高度：自动；
}
埃沃基先生{
宽度：100%；
高度：自动；
}
.1资源1{
浮动：无；
文本对齐：居中；
}
.2资源{
浮动：无；
文本对齐：居中；
}
.3资源{
浮动：无；
文本对齐：居中；
}
}

---

你是对的，没问题。将500px Css置于300px之上

亲爱的@user3643186如果不看到您使用的html代码，就很难理解对象的行为。请粘贴您的html代码。我还建议您使用此选项，这将帮助查看者轻松修改您的代码，并为您提供正确的解决方案。此选项修复了此问题。谢谢易卜拉欣。

@media screen and (max-width: 500px) 
{
}
@media screen and (max-width: 320px) 
{
}