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

在我们的网站上：桌面上的一切看起来都很棒。 当我切换到像平板电脑这样的小屏幕时，屏幕右侧会有一个填充物。当我使用更小的（智能手机）时，屏幕右侧的填充区域会更大

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

我改变了：

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

致：

---

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

停止使用浮动。使用Flexbox。太多clearfix div挡住了路

很明显，页脚已经超出了站点内容

正文

以及其他一些元素

如果您确实想缩小范围，请设置以下样式：

 * { outline: 1px solid red }

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

编辑2：

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

.footer-menu

移除

宽度：500px

.lp-section-content row

删除所有负边距

.vc_column-inner vc_custom_1548439628787

删除所有
填充
当我调整浏览器大小或使用开发工具在移动布局中查看浏览器时，我没有看到“屏幕右侧的白色区域”。我认为您的问题不在于
.panic button container
，但您的
.lp节行
中有幻灯片的网格被弄乱了。这个没有
容器
，这可能是问题所在。尝试注释或删除此部分，查看问题是否消失。页脚菜单也会导致小屏幕出现问题。可能想亲自看看，我认为问题不在
.panic button container
中。删除此元素无法解决此问题。问题是页面上的其他内容超出了页面的外部边界，并扩展了窗口。因此，
.panic button container
的
宽度：100%
只是在扩展以填充空间，而不是引起它。问题（或一个问题）是这个div:
，特别是类
行
，它具有
右边距：-15px
。这可能是一个未正确包含的引导类，因此它没有“对抗”负边距。我并不是说浮动更好，但为什么“停止使用浮动。使用Flexbox”？为什么这是相关的，为什么是绝对的？当然，浮动不太直观，但在正确使用（即清除它们）时也同样有效。此外，解决页脚问题仍然会留下一个空白。Bc在该页面上有30多个元素被浮动并从流程中删除。通常会导致像这样的意外结果。是的，我绝对反对任何情况下的浮动。浮动的元素由于没有被清除而被移出流，也就是说，它们被错误地使用。我只是不认为这与答案有关，我认为如果你要主张这样一个绝对的立场，你应该在你的答案中解释为什么。然后你会有30个清晰的修正。。。听着，我明白你的意思，这与答案没有100%的相关性，人们讨厌听到这样的绝对主张，但如果没有浮动，网络会更好。Flexbox在任何地方都受到支持，如果您正确地使用Flexbox对站点进行编码，那么您就不会有这个问题。所以，是的，我会尽可能地宣传这个想法。别再为花车辩护了，他们已经没有时间和地点了。谢谢你，关于用红色勾勒一切的提示太棒了！
.vc_column-inner vc_custom_1548439628787