Div 邊距始終位於頁面右側

Question

我正在編寫一個具有 100% 寬度和邊距的簡單導航欄組件，但無論我嘗試什么，它似乎總是離屏幕右側的頁面很遠。 知道問題可能來自哪里嗎？

我試圖通過在 div 中創建一個簡單的框並為其設置 16px 邊距來簡化事情，但我遇到了同樣的問題。 我在想也許我的 CSS 繼承自 body 的沖突屬性，但在檢查了檢查器后似乎並非如此。

感謝您的任何見解！

//_navbar.scss

.box {
    position: absolute;
    width: 100%;
    background: black;
    margin: 16px;
}

// _navbar.html.erb

  <div class="box">
    Hello?
  </div>

Answer 1

因為width: 100%加上margin: 16px超過 100%。

也許您想將margin應用於正文或任何容器是.box的父容器？

Answer 2

通過將此body屬性添加到 CSS，您可以禁用 body 標簽具有的自動 8px 邊距。 試試這個新的 CSS 樣式表。

.box {
    position: absolute;
    background: black;
    margin: 16px;
    position: fixed;
    right: 0px;
    left: 0px;
}


body {
    margin: auto;
}