为什么我'；当我添加css媒体查询时，我失去了在手机中滚动的能力

我的风格或媒体查询是否有问题？当我在我的手机里时，我失去了向下滚动的能力。这是我唯一的媒体查询

@media (max-width: 568px) {
    header {
        padding: 1em 0;
        position: fixed;
        .logo {
            width: 200px;
        }
        .main-nav {
            display: none;
         }
         #burger-icon {
            width: 27px;
            display: block;
         }
    }
    #section1 {
        height: 500px;
        text-align: center;
    }
    #section2 {
        .col-1 {
            width: 100%;
            text-align: center;
        }
        .col-2 {
            width: 100%;
            padding: 0;
            margin-left: 0;
            margin-top: 20px;
            display: block;
        }
    }
}

试试这个

@media screen and (max-width: 568px) {
header {
    padding: 1em 0;
    position: fixed;
    .logo {
        width: 200px;
    }
    .main-nav {
        display: none;
     }
     #burger-icon {
        width: 27px;
        display: block;
     }
}
#section1 {
    height: 500px;
    text-align: center;
}
#section2 {
    .col-1 {
        width: 100%;
        text-align: center;
    }
    .col-2 {
        width: 100%;
        padding: 0;
        margin-left: 0;
        margin-top: 20px;
        display: block;
    }
}

---

我修复了它，这是我脚本中的skrollr声明，这是我自己的错误。谢谢你提供的所有帮助，我认为skrollr.js在移动方面有问题。

你需要更多的上下文。你能链接这个网站吗？试试@media screen和（最大宽度：568px）我试过了，但是没有成功。这里是这个网站的链接。你的容器溢出了。在Firefox中，我必须在旁边滚动条。。。