html - 在移动平台上使网站宽度变满

Question

在我们的网站上:https://dev.shiftdivorceguide.com/桌面上的一切看起来都很棒。当我切换到平板电脑等较小的屏幕时，我会在屏幕右侧得到一个填充。当我变得更小(智能手机)时，我会在屏幕右侧获得更大的填充区域。

我不确定顶部的紧急按钮栏是否会干扰页面代码 (.panic-button-container)。我已经尝试过更改媒体查询中的 CSS。为了减小平板电脑上白色区域的大小，我更改了下面有关 Logo 和导航宽度的代码。

我改变了:

  @media (max-width: 1024px) and (min-width: 981px) {
     .header-right-panel {
        width: 40%;
        float: right;
     }
  }

到:

 @media (max-width: 1024px) and (min-width: 981px) {
  .header-right-panel {
    width: 80%;
    float: right;
  }
 }

这对布局有一点帮助，但在较小的屏幕上我仍然会看到一个白色条。智能手机是最糟糕的。任何可能的解决方案将不胜感激。

Answer 1

停止使用花车。使用 flex 盒子。太多的 clearfix div 阻碍了。

显然，页脚超出了网站内容 body 以及其他一些元素。

如果您真的想缩小范围，请设置以下样式:

 * { outline: 1px solid red }

这样您就可以看到哪个容器过度扩展，然后将其宽度设置为 100% 而不是固定宽度。

编辑 2:

使用我的技术，我缩小了问题范围:

.footer-menu

删除 width: 500px;

.lp-section-content row

移除所有负边距

.vc_column-inner vc_custom_1548439628787

删除所有填充