如何从我的网站右侧删除不必要的边距

Question

使用 Quidus 主题的我的 WordPress 网站从右侧包含不必要的空间，看起来很糟糕。请帮助：我怎样才能删除这个空间？我希望我的网页填满整个屏幕。左右两边都不需要边距。

Look at the image provided below of my website.

My Website Link is here

注意：我希望所有帖子都适合屏幕全宽。

Answer 1

您的 HTML 结构是：

<div id="page">
  <div class="site-content"></div>
  <div class="right-sidebar-wrapper"></div>
</div>

你的 CSS 是：

@media screen and (min-width: 955px) {
  .site {
    max-width: 1718px;
  }
}

@media screen and (min-width: 1105px) {
  .site-content {
    width: 56%;
  }
}

@media screen and (max-width: 1105px) and (min-width: 955px) {
  .site-content {
    width: 70%;
  }
}

@media screen and (max-width: 480px) {
  .right-sidebar-wrapper {
    width: 100%;
  }
}

@media screen and (max-width: 768px) and (min-width: 480px) {
  .right-sidebar-wrapper {
    width: 100%;
  }
}

@media screen and (max-width: 1105px) and (min-width: 955px) {
  .right-sidebar-wrapper {
    width: 70%;
  }
}

@media screen and (min-width: 1105px) {
  .right-sidebar-wrapper {
    width: 22%;
  }
}

您的 CSS 的问题是 .site-content 和 .right-sidebar-wrapper 宽度不能使其 100% 达到其父级。

让我们澄清一下：

• 在窗口宽度 > 1105px .site-content = 56% 而.right-sidebar-wrapper = 22% 所以 56% + 22% = 78% 但 100% - 78% = 22% 这是保证金的来源这个决议

• 在窗口宽度 > 955 和 .site-content = 70% 和 .right-sidebar-wrapper = 70% 这使您的右侧边栏显示在 .site-content 下方，因为 70% + 70% = 140% 所以 #page不能在同一行包含 at

为解决此更改，.site-content 和 .right-sidebar-wrapper 的宽度 CSS 规则使它们在您希望它们彼此相邻显示的分辨率下占据其父级宽度的 100%。

可能的解决方案是改变：

@media screen and (min-width: 1105px) {
  .site-content {
    width: 56%;
  }
}

@media screen and (max-width: 1105px) and (min-width: 955px) {
  .right-sidebar-wrapper {
    width: 70%;
  }
}

到：

@media screen and (min-width: 1105px) {
  .site-content {
    width: 78%;
  }
}

@media screen and (max-width: 1105px) and (min-width: 955px) {
  .right-sidebar-wrapper {
    width: 30%;
  }
}