CSS - 以百分比为中心的奇怪问题

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%;

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

width: 60%;

Answer 2

尽量将其更改为width: 15px 20% 15px 10%;您希望仅将左侧边距更改为10％。 或者在div的每一侧放置2个空白.content-wrap，宽度为10％，幻像数据为其提供宽度