响应式网站边距错误

Question

大家好！

我为客户建立一个网站（在Adobe Dreamweaver中）并偶然发现了一些问题 我的客户想要一个针对桌面和移动设备的响应式网站。

我开始编写桌面版脚本，然后使用@media查询在同一文档中编写移动版脚本。这是我用过的：

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

问题1

当我在Dreamweaver中使用预览选项时，谷歌浏览器和Firefox中的所有内容都显示正常，直到我将浏览器窗口调整为移动大小。我在右侧获得了巨大的利润，与移动网站本身一样广泛。这是它的gif：
https://media.giphy.com/media/3ov9k7XXWOog4KJN9m/giphy.gif

问题2

此外，当我在Dreamweaver中预览移动版时，它看起来应该是什么样子 但是，当我通过FTP服务器上传网站时，它看起来非常不同 在线版本没有显示应有的功能。

这是脱机版本（在Dreamweaver中）显示它的方式：https://ibb.co/fTtwvm
这是我通过FTP服务器上传它时的样子：https://ibb.co/iWbMT6。

我真的希望你们能帮我解决这个问题 这是代码：https://codepen.io/jessekoops10/pen/GORMrv
非常感谢你！

Answer 1

问题1：

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

.container和.copyright类始终具有相同的宽度（1000px），您还必须调整它们的大小。

我通常会使用Chrome开发者工具检查实用程序，但不是直接右键单击元素，而是点击Ctrl + Shift + C，然后将光标移动到空白处以查找导致问题的元素。

问题2：

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

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

看这里： https://www.w3schools.com/css/css_rwd_viewport.asp