Html Css，移动设备上不需要的水平滚动

我遇到了一个小问题，出于某种原因，我看到

标记左侧有一个巨大的白色间隙

我尝试添加HTML和body标记，以符合以下规则：

overflow-x：隐藏；
最大宽度：100vw

它在桌面视图上工作（即使我调整了浏览器窗口的大小）
但它在移动方面没有帮助（在chrome开发工具的移动视图中没有帮助）

有什么问题吗？
我认为这与网站css主要使用flexbox有关

此外，我怀疑它与图片中标记为红色的div有关（这是位置固定的，但由于某些原因，在向下滚动后出现）

这就是divcss规则

.contact-mobile{
    position: fixed !important;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding: 15px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    max-width: 100vw;
    background-color: $black;
    opacity: 0.9;

    a{
        min-width: 25%;
        text-align: center;
        padding: 5px;
        i{
            color: #fff;
        }
        &:hover{
            opacity: 1;
            i{
                color: $black;
            }
            background-color: $green;

        }
    }
}

这是开发网站
这是对我所看到的东西的放大

问题来自您的iframe位置

将
top:-5000px
替换为
left:-5000px
，它将修复移动设备上的间隙
尝试
overflow-y:hidden而不是
溢出-x：隐藏
因为
overflow-x
是水平滚动条，而
overflow-y
是垂直滚动条，很抱歉，我写的是垂直而不是水平，我有一个不需要的水平间隙。我写了overflow-x:hidden；但我仍然看到移动视图中的差距啊，好吧，有道理