我有一个 max-width: 80 rem 和 margin-inline: auto 的容器，当我将它应用到网格上时，它通过将网格从 80 rem 居中来完美地工作
//i want to put container class here adventure
但我想将容器类放在项目标题单元格中，但它无法正常工作，它将所有标题内容居中而没有达到 80rem 的大小，我不明白为什么？我知道 ils 因为 margin-inline 但通常它以 80rem 为中心，而不是之前。
.flex { display: flex; gap: var(--gap, 2rem); } .grid-container { height: 100vh; display: grid; grid-template-rows: min-content 1fr; text-align: center; } .container { max-width: 80rem; margin-inline: auto; }
当“container”类应用于父“grid-container”
div时，它具有max-width: 80rem;和margin-inline:自动；。因此，当视口宽度大于 80rem 时，可用的内联边距将被分割并平均应用于div及其父项 (body) 之间，其中div居中>div。header是div的子级，因此它在其容器内具有默认的左对齐方式。header时，div的宽度不受限制，并且header现在已划分并应用所有可用的内联边距位于其自身和div之间，导致header居中。可用边距来自header的实际宽度（几乎 40rem），而不是来自 max-width 声明。如果您只想
header有最大宽度而不是main，您可以通过添加width: 100% 来实现您想要的结果到.container.flex { display: flex; gap: var(--gap, 2rem); } .grid-container { height: 100vh; display: grid; grid-template-rows: min-content 1fr; text-align: center; } .container { width: 100%; max-width: 80rem; margin-inline: auto; }