html - CSS - 以百分比居中 div 的奇怪问题

Question

我正在构建一个相当简单的静态纯前端网页。我的包装器 div(页面中的所有其他内容都在其中)和正文具有以下 css 规则:

body {
  background-image: url(../img/background.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}

#content_wrapper {
  margin: 15px 10%; /*Client wants 20% instead of 10. Navbar must be adjusted accordingly*/
  min-width: 900px;
  padding: 0;
  border-radius: 10px;  
}

哪个工作正常:

但是，正如您在我的评论中看到的那样，客户更喜欢 20% 的边距，以使整个页面更窄。然而，这种情况发生了:

页面右移。这与我在平板电脑上打开此页面时遇到的视觉问题几乎相同，即使使用 10% 的边距也是如此(尽管我希望解释为什么平板电脑会发生这种情况，但这不是这里问题的重点)。 我怎样才能解决这个问题？据我所知，这不应该发生

Answer 1

当你这样说的时候

margin: 15px 20%;

您实际上是在告诉您左右 margin 都有 20%。这意味着 #content_wrapper 最多有 60% 的容器。问题是 60% 可能比可用空间大。我相信您应该将 width 添加到规则中:

width: 60%;