Javascript 响应性网站边距错误 大家好！

我正在为一个客户建立一个网站（使用Adobe Dreamweaver），但遇到了一些问题。
我的客户想要一个桌面和移动设备的响应性网站

我开始编写桌面版本的脚本，后来使用@media querys在同一文档中编写了移动版本的脚本。这就是我使用的：

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

问题1 当我在Dreamweaver中使用预览选项时，Google Chrome和Firefox中的所有内容都显示正常，直到我将浏览器窗口调整为手机大小。我在右边有一个巨大的边距，和手机网站一样宽。这是它的gif：

问题2 另外，当我在dreamweaver中预览移动版本时，它看起来应该是这样的。
然而，当我通过FTP服务器上传网站时，它看起来非常不同。
联机版本未按应有的方式显示

以下是脱机版本（在Dreamweaver中）的显示方式：
这是我通过FTP服务器上传时的样子：

我真的希望你们能帮我解决这个问题。
代码如下：

---

多谢各位

问题1:

确实有一些元素将页面推出，这是因为在页面的页眉和页脚附近有一些固定的宽度

.container

和

.copyright

类的宽度始终相同（1000px），您也必须调整它们的大小

我通常使用Chrome Debug工具检查实用程序来注意这一点，但不是直接点击一个元素，而是点击<代码> Ctrl + Shift +C<代码>，然后在空白空间中移动光标，找出哪个元素导致问题。

对于问题2:

您可以尝试在视口元标记中设置缩放级别

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

看这里：

---

你的代码笔看起来好像没有加载所有的代码（菜单上没有移动大小的汉堡包）。我假设在你的页面中有一个元素，div，等等将页面推出。尝试使用firebug或inspect浏览页面，查看哪些元素正在全速移动/超出手机大小。我已经尝试了inspect元素功能中的所有功能。当我打开Codepen时，它会显示它应该显示的所有内容。甚至汉堡包图标。谢谢你的调查。嘿！谢谢这似乎是问题1的解决方案。菜鸟错误。。。你认为这也能解决问题2吗？只需编辑答案，阅读参考资料并尝试解决方案：）谢谢！那就行了。真的很感激这个社区以及人们能得到的帮助。非常感谢！