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

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;

    }