使用wp_list_pages（）的列表项之间不需要的空间

Question

我正在将我制作的静态HTML模板变成WP主题，当涉及菜单时，列表项之间的空白是一个问题。以前，我曾使用HTML注释删除静态菜单<li>元素上的空格。

这是它的外观：

但是，这是我删除静态菜单后的外观：

这是菜单HTML：

<header>
  <div id='bones-logo'>
    <a href='<?= get_bloginfo('wpurl'); ?>'><h1><?php echo get_bloginfo('name'); ?></h1></a>
  </div>
  <nav>
    <ul id='bones-main-menu'>
      <li><a href='#'>Home</a></li><!--
    --><li><a href='#'>Services</a></li><!--
    --><li><a href='#'>About</a></li><!--
    --><li><a href='#'>Blog</a></li><!--
    --><li><a href='#'>Contact</a></li>
    </ul>

    <ul id='bones-social-menu'>
      <li><a href='http://www.facebook.com/#'><i class='fab fa-facebook-f fa-lg'></i></a></li><!--
      --><li><a href='http://www.instagram.com/#'><i class='fab fa-instagram fa-lg'></i></a></li><!--
      --><li><a href='http://www.twitter.com/#'><i class='fab fa-twitter fa-lg'></i></a></li>
    </ul>
  </nav>
</header>

将菜单更改为wp_list_pages()：

<ul id='bones-main-menu'>
  <?php wp_list_pages('&title_li=');?>
</ul>

第二张图片中的结果-样式与之前完全相同，我认为这是因为列表项之间的空白没有被注释掉，因为检查时填充或边距为0。我该怎么办？

我的标头的当前CSS规则：

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

header,
header nav,
footer,
.bones-container {
  display: flex;
}

/* Theme header */
header,
header nav {
  align-items: center;
  justify-content: space-between;
}

header,
section#bones-headline,
footer {
  width: 100%;
}

header {
  margin-top: 3rem;
  background-color: #0fb9b1;
}

header div#bones-logo {
  padding: .5rem;
}

header div#bones-logo h1,
header nav ul li a {
  color: #fff;
}

header nav {
  margin-right: 2rem;
}

header nav ul li {
  display: inline-block;
}

header nav ul#bones-social-menu li a {
  padding: .5rem;
  margin: .5rem;
  transition: .25s;
}

header nav ul#bones-social-menu li a:hover {
  color: rgba(119, 140, 163, 0.75);
}

header nav ul#bones-main-menu,
header nav ul#bones-main-menu li {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}

header nav ul#bones-main-menu {
  margin-right: 2rem;
}

header nav ul#bones-main-menu li {
  cursor: pointer;
  display: inline-block;
}

header nav ul#bones-main-menu li a,
section#bones-headline p,
.bones-container main div.bones-post-preview p.bones-post-information {
  font-weight: 200;
}

header nav ul#bones-main-menu li a {
  font-size: 1.25rem;
  padding: 1.5rem;
  display: block;
}

header nav ul#bones-main-menu li a,
section#bones-headline p {
  font-size: 1.25rem;
}

header nav ul#bones-main-menu li:hover {
  background-color: rgba(119, 140, 163, 0.5);
}