导航栏居中，不使用它扩展背景

.nav-container {
  margin: 0 auto;
  width: 960px; /* 设置导航栏的宽度 */
}

<div class="nav-container">
  <ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f2f2f2;
}

.nav-menu li {
  display: inline-block;
  margin-right: 10px;
}

.nav-menu li:last-child {
  margin-right: 0;
}

.nav-menu li a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
}

.nav-menu li a:hover {
  background-color: #ccc;
}