CSS：寬度 100% 不是屏幕的 100%

Question

在我的沙盒網站上，頂部有一個白條。 它包含在正文中（具有背景圖像），導航欄 styles 是

#topnav4 {background: #fff;  width: 100%; height: 70px;  }

但是該欄沒有到達屏幕的邊緣。 此外，我沒有設置任何邊距或填充。 有誰知道如何解決這一問題？

更新，還要注意導航欄不在屏幕的最頂部。 導航欄頂部和頁面頂部之間有空間。 我該如何擺脫這個？

更新，我添加了這段代碼，但問題仍然沒有解決

#topnav4 {背景：#fff; position：絕對； 左：0px； 頂部：0px； 寬度：100%； 高度：70px； }

Answer 1

您正在尋找的片段是：

html, body {
    margin: 0;
    padding: 0;
}

這將刪除所有瀏覽器中的默認用戶代理“頁邊距”。

刪除您的position: absolute添加 - 這不是解決此問題的最佳方法。

Answer 2

您可能需要將正文的邊距和填充設置為 0。

body {
    margin: 0;
    padding: 0;
}

Answer 3

您在頁面上沒有 doctype，因此它將以 Quirks 模式呈現。 這意味着瀏覽器會嘗試與舊版本的瀏覽器兼容。

這對 IE 尤其不利，它還將使用非標准框 model： http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

向頁面添加文檔類型： http://www.w3.org/QA/2002/04/valid-dtd-list.html

Answer 4

將以下內容添加到 CSS 文件的頂部，然后是 go 並閱讀有關 CSS 重置的信息：

* { margin: 0; padding: 0; }

以下是我發現有用的一些資源：

1. 最佳 CSS 重置

2. W3 學校（Doctype）

3. 盒子 Model

Answer 5

為我解決了。

min-width:100%

Answer 6

.container {display: grid;}

在網站上和

.container {display: block;}

在移動視圖中。

我遇到了同樣的問題，並注意到我的顯示設置為網格，因此它正在調整為 100% 的列而不是整個屏幕。