改不了 .container 的 max-width 是因 Bootstrap 在各断点设定了硬性 max-width 且优先级高；应优先选用 .container-fluid、响应式变体或自定义类，覆盖时须完整重写所有断点媒体查询规则。
为什么改不了 .container 的 max-width？
不是你没写对 css，而是 bootstrap 的 .container 在不同断点下用的是硬性 max-width（比如 xl 下是 1140px，xxl 下是 1320px），它优先级高于你写的 width 或 max-width: 100%。哪怕加了 !important，只要没覆盖所有断点的媒体查询规则，一缩放屏幕，空白就又回来了。
直接替换容器类是最稳的方案
别硬改默认类，Bootstrap 早留好了出口：.container-fluid 天然无 max-width，100% 占满父容器；如果只需要“比默认宽一点但不全屏”，就用响应式变体：
-
.container-xl：≥1200px 时才生效，最大宽度1140px（v5）或1320px（v6） -
.container-xxl：≥1400px 才触发，v5.3+ / v6 支持，适合超宽屏展示 - 想固定
750px？别动.container，直接自定义一个新类，比如.container-custom，在 CSS 里写死max-width: 750px并保留居中逻辑（margin-left: auto; margin-right: auto;）
手写 CSS 覆盖时必须注意断点完整性
如果你非得改默认 .container，光写一条 .container { max-width: 900px !important; } 是不够的——它只影响未匹配任何媒体查询的场景，其他断点仍走 Bootstrap 原生规则。正确做法是复制并重写全部断点：
.container {
max-width: 100%;
}
@media (min-width: 576px) {
.container { max-width: 540px; }
}
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 992px) {
.container { max-width: 960px; }
}
@media (min-width: 1200px) {
.container { max-width: 1140px; }
}
@media (min-width: 1400px) {
.container { max-width: 1320px; }
}
否则，小屏下可能突然变窄，或者大屏下卡在旧值上。
别碰 margin，那是居中的命脉
很多人看到右侧有空白，第一反应是加 me-0 或 mx-0，结果容器歪了——因为 .container 居中靠的就是 margin-left: auto; margin-right: auto。删掉它，容器就贴左了。真要“撑满”，该换 .container-fluid；真要“内部留空”，用 p-3、px-4 这类内边距类，别动外边距。
最常被忽略的一点：改完容器宽度后，记得检查子元素是否还受 .row 的负外边距影响——.container-fluid 搭配 .row 是安全的，但自定义宽度容器若没配好 padding，内容可能紧贴边缘。
