导航栏不会完全填满屏幕宽度

Question

我已经开始制作导航栏，使用导航标签，它完美地工作。使用CSS，我将导航标记的宽度设置为100％，并将边框和填充设置为0.

我似乎在导航栏的每一侧都有几个像素未填充。我希望整个宽度都被导航栏覆盖，但我无法使其工作。这里是我的html：

<nav> 
    <ul> 
     <li><a href="home.html">Home</a></li> 
     <li> 
      <a href="test1.html">Test1 <span class="carrot"></span></a> 
      <div> 
       <ul> 
        <li><a href="test#testA">TestA</a></li> 
        <li><a href="test.html#B">TestB</a></li> 
        <li><a href="teset.C">TestC</a></li> 
       </ul> 
      </div> 
     </li> 
     <li><a href="test2.html">Test2</a></li> 
     <li><a href="test3.html">Test3</a></li> 
    </ul> 
</nav> 

的CSS：

nav { 
    background-color: #fff; 
    border: 1px solid #dedede; 
    border-radius: 4px; 
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); 
    color: #888; 
    display: block; 
    margin: 8px 22px 8px 22px; 
    overflow: hidden; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

我能做些什么来解决这个问题？

Answer 1

设定的主体保证金0

CSS

body{ 
margin: 0px; 
} 

Answer 2

nav { 
    background-color: #fff; 
    border: 1px solid #dedede; 
    border-radius: 4px; 
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); 
    color: #888; 
    display: block; 
    /* margin: 8px 22px 8px 22px; */ 
    /* overflow: hidden; */ 
    /* width: 100%; */ 
    margin: 0; 
    padding: 0; 

    /* notice below: */ 
    position: fixed; 
    left: 0; 
    right: 0; 
} 

Answer 3

默认情况下所有的HTML文档都围绕它的所有四个角落的余量。在大多数情况下，页边距是理想的，有时候与设计有关，比如水平横跨整个页面的标题栏。在这种情况下，你必须明确地将0赋给body的边界。

body{ 
margin: 0px; 
} 

通过@Luis P.A

Answer 4

开始给出了答案的解释有以下CSS规则的所有项目：

*{ 
border: 0; 
padding: 0; 
margin: 0; 
} 

所有浏览器都有一些默认的CSS规则。有了这个CSS规则我会重置浏览器默认的CSS ...

Answer 5

你的CSS样式表的文档始终使用该第一行：

 * { 
    box-sizing: border-box; 
    } 
    body, html { 
    margin: 0 auto; 
    padding: 0; 
    } 

Answer 6

您可以通过“正常化”消除对浏览器预设，只需添加这个链接的头：

“https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css”

还要添加CSS：

* { box-sizing : border-box; } 

我不知道如何使用Markdown呢，如果这是必需的话......