为什么网页未遵守 CSS 的 max-width 和 min-width 规则？

body 的 max-width: 992px 已经生效。溢出发生在内部的 Bootstrap .container：视口达到 1200px 时，容器宽度会变成 1170px，超过 body 的宽度。

要让整份简历在宽屏上居中，需要限制 body 的宽度，同时让内部容器随它调整。

为什么视口达到 1200px 后会右移？

你使用的 Bootstrap 3.3.7 为 .container 设置了以下断点宽度：

视口达到 1200px 时，下面两条宽度规则会同时生效：

body {
  max-width: 992px;
}

/* 来自 Bootstrap */
.container {
  width: 1170px;
}

父元素的 max-width 只限制自身宽度，不会自动缩小子元素的固定宽度。所以，虽然 body 正常居中，内部的 .container 仍会向右溢出，看起来像整页偏向右侧。

下面的媒体查询也不会取消前面的宽度限制：

@media (min-width: 1200px) {
  body {
    /* 没有声明 max-width */
  }
}

视口大于或等于 1200px 时，min-width: 992px 和 min-width: 1200px 两个查询都会匹配。后面的规则没有重新声明 max-width，因此前面的 max-width: 992px 仍然有效。

如何调整 CSS？

现有 HTML 中的各个 .container 可以保留，只需让它们跟随 body 的宽度。

删除分散在各个媒体查询中的 body 规则，统一改用下面的基础样式，并放在 Bootstrap 样式之后：

body {
  box-sizing: border-box;
  width: 100%;
  max-width: 992px;
  margin: 10px auto;
  font-family: 'Times New Roman', Times, serif;
  font-size: 14px;
  line-height: 1.2;
}

/* 对应当前 HTML 中直接位于 body 下的各个容器 */
body > .container {
  width: 100%;
}

调整后的宽度变化如下：

• 可用宽度不足 992px 时，body 随可用空间缩小。
• 可用宽度超过 992px 时，body 保持 992px，通过左右自动外边距居中。
• .container 跟随 body 的宽度，不再切换到 Bootstrap 的 1170px。

Bootstrap 3 已为 .container 设置 box-sizing: border-box，左右内边距会计入 width: 100%，继续为正文保留两侧留白。

原有的标题、浮动和文字对齐规则可以保留。如果需要在某些屏幕宽度下调整字号，单独写媒体查询即可，无须重复整组 body 样式。

只想做最少修改怎么办？

如果想保留 Bootstrap 在各个断点下的容器宽度，只解决溢出问题，可以在现有 CSS 末尾添加：

body > .container {
  max-width: 100%;
}

原来的 750px、970px 宽度会保留；到宽屏断点时，1170px 会受到父元素宽度的限制。

这个方案依赖现有的 body { max-width: 992px; } 和左右自动外边距。如果想让各屏幕宽度下的规则更直观，可以采用上一节的完整调整。两种方案选一种即可。

min-width 需要怎样处理？

下面两处 min-width 的含义不同：

@media (min-width: 320px) {
  body {
    min-width: 320px;
  }
}

媒体查询中的 min-width 判断视口宽度，body 中的 min-width 则限制元素宽度。

这段规则只在视口大于或等于 320px 时生效，无法保证页面在小于 320px 的视口中仍有最低宽度。如果确实要强制页面宽度至少为 320px，应把规则放在媒体查询外：

body {
  min-width: 320px;
}

不过，可用宽度不足 320px 时，这样会造成横向溢出。简历页面如果需要随屏幕缩小，通常可以省略这条限制。

调整时还要注意什么？

保留 Bootstrap 的 .container、.row、.col-* 配套结构。.row 的负外边距需要配合容器和列的内边距使用，直接删除容器类可能影响原有对齐。

媒体查询始终根据视口宽度触发。即使 body 的宽度被限制为 992px，宽屏上的 .col-md-6 等规则仍会生效，判断依据不会变成 body 的宽度。

如果修改后仍有横向溢出，可以在开发者工具中查看 body 和 .container 各自的计算宽度，再检查是否有无法换行的长链接或其他固定宽度元素。不要用 overflow-x: hidden 掩盖尺寸问题，否则超出的内容可能被直接裁掉。

备注：内容仅供参考。