我有一個 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; }