无法找到删除列表项周围的空白/边框的方法

Can't Find a Way to Remove the Whitespace/ Border Around My List Items

我的导航栏变成了移动设备的下拉菜单。这是一个 CSS 菜单,但是,下拉项周围有一种白色 space 或边框。

我尝试了此处列出的所有选项:How to remove the space between list items不幸的是,这些解决方案对我不起作用。我还拆开了菜单,可以通过将#navigation a 的 margin-top 移动到 0,将背景的不透明度降低 0.05,并将列表项的高度设置为 38px 来修复一些边框。尽管如此,"border" 在某些设备上仍然令人讨厌,包括 iPhone X.

这个网站是我自己的音乐项目的网站,所以我把它放在网上,以防有帮助:http://mynameisdidi.com/

@media screen and (max-width: 695px) {
  .hamburger {
    display: none;
  }
  .hamburger.showClass {
    display: block;
    position: fixed;
  }
  nav {
    position: relative;
    z-index: 500;
  }
  ul {
    float: right;
    width: 100%;
    transition: .45s ease-in;
    margin-top: -25px;
  }
  li {
    width: 95%;
    height: 38px;
  }
  #navigation a {
    display: block;
    width: 58.5%;
    margin-right: 1px;
    margin-top: 0;
    float: right;
    background-color: rgba(255, 255, 255, 0.75);
    color: #b406c7;
    /*magenta*/
    text-align: center;
    padding: 6px;
    font-size: 19px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
  }
}
<div class="hamburgerIcon" onclick="toggleClass()">
  <h2>&#9776;</h2>
</div>

<nav id="navigation">
  <ul class="hamburger">
    <li><a href="index.html">Home</a></li>
    <li><a href="music.html">Music</a></li>
    <li><a href="bio.html">Bio</a></li>
    <li><a href="booking.html">Booking</a></li>
  </ul>
</nav>

抱歉,如果此 post 不符合 posting 标准,这是我的第一个 post。 (以后请告诉我。谢谢。)

如果您指的是 li 元素之间的空格,则会导致height: 38px;。改(去掉)就没有间距了

![我怎么看 li 空格][1] https://i.stack.imgur.com/v6Rhl.png