Elements look offset, yet no offset is applied

Question

I'm starting to learn things like HTML, CSS, etc. And I've just made a new website to test out different things.

So far, I have navigation tabs at the top, and they work.

But the whole list just looks offset from the left side of the screen, even though there isn't any horizontal offset begin applied.

Here's a screenshot of what I'm talking about:

As you can see, the whole bar with the page links is offset from the left, and looks normal on the right.

Here's my CSS code that's used as the stylesheet:

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;
}

I am completely clueless so far as to what could be causing this.

Answer 1

By default, browsers will put a margin on the body. Try adding this to your CSS:

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

Either that, or it could be the margin on your ul. Try changing its CSS to:

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>