CSS寬度100%還是超出容器：把padding算進box-sizing

卡片已設width:100%，加上內距後，右邊卻超出容器。先看這張卡片的box-sizing：若寬度只算內容區，左右padding與border還會再加上去。把它改成border-box，才會把這些空間算進指定寬度。

先用一張卡片看出差別

把下面HTML與CSS放進空白頁。外層寬300px，卡片寬100%，左右各有24px內距和2px邊框。這裡刻意指定content-box，避免你的主題原本已設border-box，讓問題無法重現。

<div class="demo-frame">
  <div class="demo-card">卡片內容</div>
</div>

.demo-frame {
  width: 300px;
  max-width: 100%;
}

.demo-card {
  box-sizing: content-box;
  width: 100%;
  padding: 24px;
  border: 2px solid #126477;
}

在外層確實有300px可用、邊框按2px計算時，卡片的邊框外緣總寬是300＋24×2＋2×2，也就是352px。100%只填滿內容區，並沒有替左右多出的52px預留位置。瀏覽器縮放可能讓邊框換算後出現小數，實際尺寸請看開發者工具的盒模型。

只改卡片的box-sizing

.demo-card {
  box-sizing: border-box;
  width: 100%;
  padding: 24px;
  border: 2px solid #126477;
}

同樣300px的可用寬度，現在padding與border都放在這300px裡，內容區則縮小。以邊框2px計，內容區剩248px。這個案例沒有margin；border-box也不會把margin包進width，若另加左右外距，仍須另外計算。

在原網站裡確認改到哪一層

打開瀏覽器開發者工具，選到超寬卡片本身，查看Computed裡的box-sizing、width、padding和border。先只切換這張卡片的box-sizing，比較左右邊界是否回到容器內，再把確定有效的規則寫回對應元件。

不要只看CSS檔裡有沒有border-box：選擇器可能沒有套中，也可能被後面的規則覆蓋。這個屬性預設不繼承，父層設定不代表所有後代都有同樣值；部分表單元件的瀏覽器預設也不同。修改既有主題時，先限定目標卡片，別為一個區塊直接重設全站。

還在超寬，就查別的來源

border-box處理的是指定寬度如何容納padding與border。固定寬圖片、不能換行的長字串、額外margin，或Flex子項的最小寬度，仍可能造成溢出。先找出真正超出邊界的元素，不要用整頁overflow:hidden把問題和內容一起藏掉。

最後把容器縮窄，檢查卡片內容有沒有被壓得難以閱讀。內容區最小只能到0；當padding與border本身已比可用寬度大，border-box也不能保證塞得下。此時要調小內距、調整元件排列，或重新分配空間。

參考資料