引导导航栏+ purecss菜单未对齐

<nav>
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
</nav>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.0.3/pure-min.css">

<style>
  .pure-menu {
    background-color: #f2f2f2;
    padding: 0;
  }

  .pure-menu-list {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    padding: 0;
  }

  .pure-menu-item {
    margin-right: 10px;
  }

  .pure-menu-link {
    color: #333;
    text-decoration: none;
    padding: 10px;
  }
</style>

<script>
  var menuItems = document.querySelectorAll('.pure-menu-item');

  menuItems.forEach(function(item) {
    item.addEventListener('click', function() {
      // 执行点击菜单项后的操作
    });
  });
</script>