Навигация не охватывает весь путь

Question

Я новичок в CSS. Я пытаюсь воссоздать сайт из тематического исследования в книге. Как вы можете видеть на картинке, которую я прикрепил, панель навигации оставляет мало места слева. Я не могу выяснить, что является причиной этого или Как я могу это исправить? Просмотр веб-страницы

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

<div id="wrapper">
  <header>
    <h1>Nature Walk</h1>
  </header>
  <ul id="dot">
    <nav>
      <li><a href="home.html">Home</a></li>
      <li><a href="login.html">Login</a></li>
      <li><a href="Amenities.html">Amenities</a></li>
      <li><a href="eForms.html">eForms</a></li>
    </nav>
  </ul>
</div>

Answer 1

Вам просто нужно обновить один класс, который #dot Всякий раз, когда используется ul по умолчанию, он имеет отступ слева, поэтому вам нужно обновить его, используя padding: 0 или padding-left: 0

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