html - body 在右侧显示空白

Question

我整理了这个网站: brudenellridingstables.com

基于此模板 - https://startbootstrap.com/template-overviews/creative/

我遇到的问题是页面右侧有一个空白区域。

我试过了

body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

这解决了空白问题但是 overflow-x: hidden; 行打破了导航栏的前/后行为，并导致 fa 图标进一步向下页面不显示。

有什么方法可以在控制页面主体的 overflow-x 的同时同时拥有导航栏和 fa 图标的功能？

或者我可以在 CSS 中做些什么来解决这个问题？

我对 CSS 中的父子动态不是很了解，除了导致右侧空白的 overflow-x 之外，是否还有其他原因？

我见过这个问题几次，但没有像我这样的导航栏。我认为回答这些问题会对其他人有所帮助，因为这会加深他们对 CSS 复杂性的了解。

谢谢!

Answer 1

页面中间有一个部分(在 header 之后)带有 class="row bg-primary"

.row 需要在 .container 或 .container-fluid 中。您看到的是 .row 上的 -15px 左/右 margin，通常由 .container< 偏移父级。

将该行包装在 .container-fluid 中。