在移动设备上查看时 HTML 边距压缩

Question

我尝试使用此处的一些帖子来调整移动设备的大小，但我似乎无法使其正常工作。当您在移动设备上查看网站时，边距会将所有元素集中在一起

/* 文本格式化 */

    .introPar1 {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
            margin-left: 400px;
            margin-right: 400px;
            font-size: 30px;
    }

    .introPar1 h1 {
            text-align: center;
    }

    .contacts {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
            margin-left: 400px;
            margin-right: 400px;
            font-size: 30px;

     }

/* 移动格式化 */

@media (max-width: 1100px) {
    introPar1 {
        margin-right: 20px;
        `enter code here`margin-left: 20px;
         }
}

@media (max-width: 750px) {
    body {
        margin-right: 5vw;
        margin-left: 5vw;
    }
}

@media (max-width: 500px) {
    body {
        margin-right: 2vw;
        margin-left: 2vw;
    }
}

Answer 1

你在这样的移动设备上看到这个页面

你需要这样改

然后增加导航栏的宽度

(我试过宽度:1520 像素；对于 Nav，因为这是您使用的背景图像大小)