如何让我的导航ul li背景填满整个导航栏？

Question

我正在为我的网页设计入门课程创建一个简单的网站。我正在尝试制作一个包含六个列表项的居中导航栏。当用户将鼠标悬停在某个项目上时，背景会从青色变为白色。我的问题是这个白色背景没有一直延伸到左边。

我尝试过尝试不同的填充和边距，但每次白色都会溢出到右侧，但不会流到左侧。将 a 的显示更改为块也没有帮助。

nav ul li a {
  text-decoration: none;
}

nav {
  line-height: 2;
  font-family: Garamond, Georgia, 'Times New Roman', Times, serif;
  width: 100%;
  background-color: #023436;
}

nav ul li {
  list-style-type: none;
  padding: 0;
  text-align: center;
  width: 100%;
}

nav ul li:hover {
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}

a#navigation {
  display: none;
}

<header>
  <img src="media/header2.png" alt="Reading Record Header" id="headerlogo">
  <nav class="horizontal" id="navbar">
    <a href="#" id="navigation"><img src="media/naviconnobg.png"></a>
    <ul>
      <li><a href="finalprojecthome.html" style="color:#ecb9a7;">Home</a></li>
      <li><a href="finalprojectlog.html" style="color:#ecb9a7;">Log</a></li>
      <li><a href="finalprojectcontact.html" style="color:#ecb9a7;">Contact</a></li>
      <li><a href="finalprojectwriting.html" style="color:#ecb9a7;">Original Work</a></li>
      <li><a href="finalprojectreviews.html" style="color:#ecb9a7;">Reviews</a></li>
      <li><a href="finalprojectphotoshoots.html" style="color:#ecb9a7;">Photoshoots</a></li>
    </ul>
  </nav>
</header>

抱歉，如果我做错了，这是我第一次在这里发帖。预先感谢您的帮助！

Answer 1

尝试添加：

left:0;

或者：

body{ margin:0; padding:0; }

到你的 CSS 文件