Html 媒体查询不起作用，页面没有响应

事实上，我对HTML和CSS还不熟悉。为了练习，我使用了psd&试图实现，但我的媒体查询不起作用。我曾尝试将所有容器的宽度设置为100%，但当我在浏览器中执行响应模式时，右侧出现空白。再一次，当我试图缩小屏幕尺寸时，它正在崩溃。请有人在这方面指导我。这将是巨大的帮助

html，body，ul，li，p{
边际：0px；
填充：0px；
}
.内容{
宽度：1250px；
保证金：0px自动；
}
.车身容器{
宽度：100%；
保证金：0px自动；
背景：url(https://i.imgur.com/4hBal14.png);
背景尺寸：封面；
}
#标志{
高度：100px；
垂直对齐：中间对齐；
右边距：250px；
}
.nav集装箱ul{
列表样式类型：无；
背景：透明；
}
.nav集装箱李{
浮动：左；
颜色：白色；
字体系列：“Gentium Book Basic”，衬线；
}
.nav容器ul li:非（：第一个子项）：悬停{
文本对齐：居中；
}
.nav容器>ul>li:非（：第一个孩子）{
填充顶部：54px；
右边距：53px；
}
.社交媒体{
左边距：-18px；
}
.社交媒体李{
右边距：18px；
}
法兰西{
文字装饰：无；
}
.fa脸谱网{
颜色：#dab33e；
}
.fa推特{
颜色：#dab33e；
}
.fa youtube{
颜色：#dab33e；
}
.nav集装箱p{
明确：两者皆有；
字体系列：“Yeseva One”，草书；
文本对齐：居中；
字体大小：48px；
颜色：白色；
填充顶部：130px；
边缘底部：30px；
}
.边界{
文本对齐：居中；
}
.边境管理{
宽度：230px；
高度：50px；
边缘底部：42px；
}
.按钮组{
文本对齐：居中；
填充底部：142px；
}
.导航集装箱.按钮-1{
左边距：30px；
宽度：229px；
显示：内联块；
填充：10px 14px；
颜色：#FFF；
边框：1px实心#010101；
文字装饰：无；
字体大小：14px；
线高：120%；
背景：#201913；/*旧浏览器的回退颜色*/
背景：rgba（32,25,19,0.5）；
-webkit过渡：背景色300毫秒；
-moz过渡：背景色300毫秒；
过渡：背景色300毫秒；
光标：指针；
}
.导航集装箱.按钮-2{
左边距：30px；
宽度：229px；
显示：内联块；
填充：10px 14px；
颜色：#fff；
边框：1px实心#FFF；
文字装饰：无；
字体大小：14px；
线高：120%；
背景：#fff；/*旧浏览器的回退颜色*/背景：rgba（255、255、255、0.5）；
-webkit过渡：背景色300毫秒；
-moz过渡：背景色300毫秒；
过渡：背景色300毫秒；
光标：指针；
}
·厨师长集装箱{
宽度：100%；
保证金：0px自动；
浮动：左；
背景：url(https://i.imgur.com/ZekPxCX.png)重复0次；
}
厨师长的话{
边缘顶部：100px；
宽度：50%；
浮动：左；
}
厨师长{
字体系列：'Yeseva One'，草书；
文本对齐：居中；
字体大小：42px；
颜色：#cc9900；
}
B.边界-2{
文本对齐：居中；
}
.chef-words.chef-words-2{
字体系列：“Lato”，无衬线；
字体大小：14px；
颜色：#000000；
文本对齐：居中；
边缘顶部：42px；
}
厨师长{
文本对齐：居中；
边缘顶部：58px；
}
.厨师容器.厨师盘子{
宽度：50%；
浮动：对；
边缘顶端：76px；
边缘底部：82px；
}
.配料容器{
明确：两者皆有；
宽度：100%；
保证金：0px自动；
背景：url(https://i.imgur.com/jrvxhTU.png);
背景尺寸：封面；
填充顶部：100px；
填充底部：100px；
}
.覆盖{
宽度：570px；
背景色：#221c17；
不透明度：0.7；
填充：50px；
左边距：600px；
}
.叠加h2{
字体系列：'Yeseva One'，草书；
颜色：白色；
文本对齐：居中；
}
.p{
字体系列：“Lato”，无衬线；
字体大小：14px；
文本对齐：居中；
颜色：白色；
}
.成分图像{
文本对齐：居中；
}
.成分图像{
右边距：30px；
边缘顶端：72px；
}
B.边界-5{
文本对齐：居中；
}
.菜单{
明确：两者皆有；
浮动：左；
宽度：100%；
背景：url(https://i.imgur.com/LUnK8M7.png)重复0次；
}
1.开胃菜{
浮动：左；
}
.开胃菜h1{
左边距：227px；
字体大小：35px；
字体系列：'Yeseva One'，草书；
颜色：#cc9900；
}
.开胃菜.border-4 img{
左边距：210像素；
宽度：230px；
高度：28px；
边缘底部：40px；
}
.开胃菜{
字体系列：“Lato”，无衬线；
}
.开胃菜h4{
字体系列：'Yeseva One'，草书；
字体大小：20px；
边际：0px；
颜色：#c89f2d；
边框底部：1px实心；
边界图像：线性梯度（向右，#e6e2ca 0%，#e0d5ad 60%，#e3d7ae 61%，#e6e2ca 100%）；
边界图像切片：1；
}
.menu-1{
浮动：左；
左边距：110像素；
边缘底部：41px；
}
.菜单-1 h4{
填充底部：13px；
}
.菜单-1页{
填充顶部：14px；
}
.菜单-1.项目{
右边距：293px；
}
.menu-2{
明确：两者皆有；
浮动：左；
左边距：110像素；
边缘底部：41px；
}
.菜单-2.项目{
右边距：206px；
}
.menu-2 h4{
填充底部：13px；
}
.menu-2P{
填充顶部：14px；
}
.菜单-3{
明确：两者皆有；
浮动：左；
左边距：110像素；
边缘底部：71px；
}
.菜单-3.项目{
右边距：206px；
}
.菜单-3 h4{
填充底部：13px；
}
.菜单-3页{
填充顶部：14px；
}
.开胃菜.沙拉{
左边距：266px；
}
.菜单-4{
明确：两者皆有；
浮动：左；
左边距：110像素；
边缘底部：30px；
}
.菜单-4.项目{
右边距：222px；
}
.菜单-4 h4{
填充底部：13px；
}
.菜单-4页{
填充顶部：14px；
}
.特别的{
位置：相对位置；
明确：两者皆有；
浮动：左；
左边距：95px；
边框：1px实心#e3d4a3；
边际下限：28px；
}
.特价，特价{
位置：绝对位置；
顶部：-20px；
右：-1px；
背景图片：url（./special.png）；
颜色：白色；
左侧填充：13px；
右侧填充：13px；
文本对齐：居中；
边界：无；
}
.特别菜单-5.项目{
M
.content{
    width: 1250px;
    margin: 0px auto;
}

@media (max-width: 992px)  {
   .content {width: 960px;}
}
@media (max-width: 768px)  {
   .content {width: 740px;}
}
@media (max-width: 481px)  {
   .content {width: 100%;}
}