响应式网站边距错误
Responsive website margin error
大家好！
我正在为客户构建一个网站（在 Adobe Dreamweaver 中）并偶然发现了一些问题。
我的客户想要一个适用于桌面和移动设备的响应式网站。
我开始编写桌面版本的脚本，后来使用@media 查询在同一个文档中编写移动版本的脚本。这是我使用的：
@media only screen and (max-width: 500px){
}
问题 1
当我在 Dreamweaver 中使用预览选项时，Google Chrome 和 Firefox 中的所有内容都显示正常，直到我将浏览器 window 调整为移动尺寸。我在与移动网站本身一样宽的右侧获得了巨大的利润。这是它的动图：
https://media.giphy.com/media/3ov9k7XXWOog4KJN9m/giphy.gif
问题 2
另外，当我在 Dreamweaver 中预览移动版本时，它看起来应该是这样的。
但是，当我通过 FTP-服务器上传网站时，它看起来非常不同。
在线版本未按应有的方式显示。
这是离线版本（在 Dreamweaver 中）的显示方式：https://ibb.co/fTtwvm
这是我通过 FTP-server: https://ibb.co/iWbMT6 上传它时的样子。
真心希望大家能帮我解决这个问题
这是代码：https://codepen.io/jessekoops10/pen/GORMrv
非常感谢！
对于问题1：
您确实有一些元素推出了页面，这是因为您在页面的页眉和页脚附近有一些固定宽度。
.container 和 .copyright 类 始终具有相同的宽度 (1000px)，您也必须调整它们的大小。
我通常使用 Chrome Developer tools inspect 实用程序注意到这一点，但不是通过直接右键单击一个元素，而是点击 Ctrl + Shift + C 然后将光标移动到空白处以查找哪个元素导致了问题。
对于问题2：
您可以尝试在视口元标记中设置缩放级别
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
大家好！
我正在为客户构建一个网站（在 Adobe Dreamweaver 中）并偶然发现了一些问题。
我的客户想要一个适用于桌面和移动设备的响应式网站。
我开始编写桌面版本的脚本，后来使用@media 查询在同一个文档中编写移动版本的脚本。这是我使用的：
@media only screen and (max-width: 500px){
}
问题 1
当我在 Dreamweaver 中使用预览选项时，Google Chrome 和 Firefox 中的所有内容都显示正常，直到我将浏览器 window 调整为移动尺寸。我在与移动网站本身一样宽的右侧获得了巨大的利润。这是它的动图：
https://media.giphy.com/media/3ov9k7XXWOog4KJN9m/giphy.gif
问题 2
另外，当我在 Dreamweaver 中预览移动版本时，它看起来应该是这样的。
但是，当我通过 FTP-服务器上传网站时，它看起来非常不同。
在线版本未按应有的方式显示。
这是离线版本（在 Dreamweaver 中）的显示方式：https://ibb.co/fTtwvm
这是我通过 FTP-server: https://ibb.co/iWbMT6 上传它时的样子。
真心希望大家能帮我解决这个问题
这是代码：https://codepen.io/jessekoops10/pen/GORMrv
非常感谢！
对于问题1：
您确实有一些元素推出了页面，这是因为您在页面的页眉和页脚附近有一些固定宽度。
.container 和 .copyright 类 始终具有相同的宽度 (1000px)，您也必须调整它们的大小。
我通常使用 Chrome Developer tools inspect 实用程序注意到这一点，但不是通过直接右键单击一个元素，而是点击 Ctrl + Shift + C 然后将光标移动到空白处以查找哪个元素导致了问题。
对于问题2：
您可以尝试在视口元标记中设置缩放级别
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">