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

Question

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

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

我变了：

  @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

停止使用浮点数。使用弹性盒。太多的 clearfix div 挡住了路。

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

如果您真的想缩小范围，请设置此样式：

 * { outline: 1px solid red }

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

编辑 2：

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

.footer-menu

删除width: 500px;

.lp-section-content row

删除所有负边距

.vc_column-inner vc_custom_1548439628787

删除所有padding