导航并不能完全覆盖

Question

我是CSS新手。我正在尝试通过书中的案例研究来重新创建一个网站。如您在图片中所见，我已在附件中添加了导航栏。我无法找出是什么原因或如何解决？View of the webpage

equals()

#wrapper {
  width: 80%;
  margin: 0 auto;
}

a:link {
  text-decoration: none;
}

a:hover {
  color: red;
}

nav {
  letter-spacing: 0.5em;
  padding: 10px 10px;
  border: 1px solid black;
  background-color: white;
  text-align: center;
}

nav ul {
  margin: 0;
  padding: 0;
  width: 100%;
}

nav li {
  display: inline-block;
}

nav a {
  text-decoration: none;
  display: block;
  border-right: 1px solid black;
}

#dot {
  list-style-type: none;
}

body {
  background-color: #4286f4;
  text-align: center;
}

footer {
  text-align: center;
  font-size: small;
  font-family: italic;
}

header {
  background-color: #91b0e2;
}

main {
  background-color: white;
  border: 1px solid black;
}

Answer 1

您只需要更新一个类，即#dot 默认情况下，无论何时使用ul，它的左侧都有填充，因此您需要使用padding：0或padding-left：0

更新

#dot{
    list-style-type: none;
    padding:0;
}