元素看起来偏移，但没有应用偏移

Question

我开始学习HTML，CSS等等。我刚刚建立了一个新的网站来测试不同的东西。

到目前为止，我在顶部有导航标签，它们可以正常工作。

但是整个列表看起来只是偏离屏幕的左侧，即使没有开始应用任何水平偏移。

这是我正在谈论的内容的屏幕截图：

如您所见，带有页面链接的整个栏从左侧偏移，在右侧看起来正常。

这是我的CSS代码，用作样式表：

＆＃13;

＆＃13;

body {
    background-color: white;
}

ul {
    list-style-type: none;
    margin: 10;
    padding: 0;
    width: 100%;
    background-color: #454b54;
    position: fixed;
    overflow: auto;
    border-radius: 0px;
}

li {
    display: inline-block;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #4CAF50;
    color: white;
}

＆＃13;

＆＃13;

＆＃13;

到目前为止，我完全无能为力。

Answer 1

我认为你需要在body中添加margin：0和CSS中的html

html{
margin:0;
}

body{
margin:0;
}

Answer 2

默认情况下，浏览器会在body上设置边距。尝试将此添加到您的CSS：

body {
    margin: 0;  /* Add margin: 0 */
    background-color: white;
}

要么是，要么它可能是ul的保证金。尝试将其CSS更改为：

ul {
    list-style-type: none;
    margin: 0; /* Instead of 10 */
    padding: 0;
    width: 100%;
    background-color: #454b54;
    position: fixed;
    overflow: auto;
    border-radius: 0px;
}

body {
    background-color: white;
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #454b54;
    position: fixed;
    overflow: auto;
    border-radius: 0px;
}

li {
    display: inline-block;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #4CAF50;
    color: white;
}

<ul>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">null</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">null</a>
  </li>
</ul>