我正在建立一個移動優先的網站，我不明白為什么導航條的寬度會超出屏幕寬度。我正在414 x 896的屏幕上觀看。我設置寬度:100%，空白和填充為0，但它仍然溢出。我還嘗試了一個div元素，同樣的事情發生了。我正在使用Google DevTools查看屏幕，可能是他們那邊出錯了？

html {
  font-size: 16px;
}

* {
  font-family: Verdana;
  padding: 0;
  margin: 0;
}

nav {
  height: 50px;
  border: 1px solid red;
  width: 100%;
}

<nav>
  <a>Log in</a>
</nav>

導航寬度的計算方法是將100%加上1px邊框。要么使用calc()來解決這個問題，要么更改框的大小:

使用calc():

html {
  font-size: 16px;
}

* {
  font-family: Verdana;
  padding: 0;
  margin: 0;
}

nav {
  height: 50px;
  border: 1px solid red;
  width: calc(100% - 2px);
}

<nav>
  <a>Log in</a>
</nav>

您將nav設置為100%，然后添加一個1px的邊框，使總數更大。

html {
      font-size: 16px;
      width:100%;
    }

    * {
      font-family: Verdana;
      padding: 0;
      margin: 0;
    }

    nav {
      height: 50px;
      border: 1px solid red;
    }

<nav>
      <a>Log in</a>
    </nav>