html - 缺少背景颜色

Question

我目前正在创建主导航菜单，但在浏览了大量教程后，我似乎无法修复导航栏上缺少的部分，如左图靠近黑色边框的部分所示.

#mainnav {
  background-color: #4a646c;
  text-align: center;
}

#mainnav li {
  list-style: none;
  display: inline-block;
}

#mainnav a {
  text-decoration: none;
  color: white;
  display: inline-block;
  border-right: 1px solid black;
  min-width: 300px;
  text-align: center;
  padding: 10px 16px;
}

#mainnav li:first-child a {
  border-left: 1px solid black;
}

#mainnav a:hover,
#secondary a:hover {
  color: darkorange;
}

#mainnav .current {
  background-color: #2f4f4f;
}

<nav id="mainnav">
  <ul>
    <li><a href="european_cities.html">Home</a></li>
    <li><a href="#" class="current">Top 4 places</a></li>
    <li><a href="transport.html">Transportation</a></li>
    <li><a href="travel_tips.html">Travel tips</a></li>
  </ul>
</nav>

Answer 1

向您的li添加边框并减少一点内边距。

#mainnav {
  background-color: #4a646c;
  text-align: center;
}

#mainnav li {
  list-style: none;
  display: inline-block;
  border-right: 1px solid black;
  border-left: 1px solid black;
}

#mainnav a {
  text-decoration: none;
  color: white;
  display: inline-block;
  min-width: 300px;
  text-align: center;
  padding: 10px 13px;
}

#mainnav a:hover,
#secondary a:hover {
  color: darkorange;
}

#mainnav .current {
  background-color: #2f4f4f;
}

<nav id="mainnav">
  <ul>
    <li><a href="european_cities.html">Home</a></li>
    <li><a href="#" class="current">Top 4 places</a></li>
    <li><a href="transport.html">Transportation</a></li>
    <li><a href="travel_tips.html">Travel tips</a></li>
  </ul>
</nav>