为什么移动网站右侧有过多的空白？

Question

有一个网站的移动版本在 iPhone 上右侧空间过大。该网站是 www.liveinhomecare.com

之前已经修复了使用溢出：隐藏；但不再工作了。

有人知道解决这个问题的方法吗？

顺便说一句，我有可能导致此问题的文本全角横幅，但使用上述修复纠正了此问题，但现在又回来了......

.banner h1 {

    clear: both;

    font-weight: 400;

    margin: 0;

    text-rendering: optimizeLegibility;

    text-transform: uppercase !important; 

    color: #ebebeb !important;

    font-size: 12px !important; 

    font-size: 0.75rem !important; 

    line-height: 1.25;

    margin-top: 0.250em;

    margin-bottom: 0em;

}

.banner h2{

    margin-top: 0.750em !important; 

    color: #ffffff !important;

}

.banner {

    position: relative; /* for child pseudo-element */

    z-index: 0;

    margin: 0 -600rem;

    /* add back negative margin value */

    padding: 0.25rem 600rem;

    background: #3887b7;

    color: #ffffff !important;

    padding-top: 50px;

    padding-bottom: 30px;

    margin-bottom: 40px;

    overflow: hidden;

}

.banner:before {

    content: "";

    position: absolute;

    z-index: -1; /* behind parent */

    top: 0;

    bottom: 0;

    /* subtract h2 padding (1.5rem) */

    left: 598.5rem;

    right: 598.5rem;

    background: #3887b7;

    overflow: hidden;

}

Answer 1

只需添加溢出-x：隐藏；到你的 HTML 元素：    html {      height: 100%;      overflow-x: hidden;    }