页眉/页脚未在中心对齐/保持静止

Question

我的页眉和页脚由于某种原因没有正确居中，它们似乎是几个像素关闭。此外，当我向下滚动页面时（不粘贴在顶部/底部），页脚因某种原因而移动。

我已经足够了，因为代码从我的研究中看起来是正确的，但它只是不起作用。所以，如果有人知道最新情况，那就值得赞赏。

body {
  background-color: #323232;
  font-family: Lato;
  padding: 0;
  margin: 0;
}
.nav {
  font-weight: normal;
  list-style: none;
  text-align: center;
  width: 100%;
  top: 0;
  padding: 20px 0 20px 0;
  background-color: #4F4F4F;
}

.nav li {
  display: inline-block;
  padding: 0 25px 0 25px;
}

.nav li a {
  text-decoration: none;
  color: #ffffff;
}

.nav li a:hover {
  color: #c1c1c1;
}

.footer {
  list-style: none;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 20px 0 20px 0;
}

.footer li {
  display: inline-block;
  padding: 0 25px 0 25px;
  font-weight: lighter;
}

.footer li a {
  text-decoration: none;
  color: #ffffff;
}

<header>
  <ul class="nav">
    <li><a href="index.html">HOME</a></li>
    <li><a href="projects.html">PROJECTS</a></li>
    <li><a href="about.html">ABOUT</a></li>
  </ul>
</header>

<footer>
  <ul class="footer">
    <li><a href="https://steamcommunity.com/id/wow">Made by Lumo © 2017</a>
    </li>
  </ul>
</footer>