我的导航栏链接中的左边距不会消失

Question

我提前道歉，但我已经在这个网站（和谷歌）搜索了几个小时，但找不到解决方案。我正在做这个 Freecodecamp 项目。

https://codepen.io/alex1014/pen/XWMaEGg

问题是：在我的导航栏（粉红色）中，3 个链接没有一直位于左侧，就像文本 PREMIUM TROMBONES（红色 div 中）一样......它们被稍微推向中心.看起来还有某种类型的边距，我无法弄清楚它来自哪里，因为我已将每个 html/浏览器默认边距设置为 0。

我还注意到，如果我 text-align: right 链接将完全向右移动...但如果我向左对齐，仍然会有边距...

* {
margin: 0;
box-sizing: border-box;
}

body, html {  
  background: white;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
 }

#container {
  background-color: cyan;
  width: 80%;
  margin: auto;
}

header {
  background-color: cyan;
}

#logo {
  background-color: red;
}

#navbar {
  background-color: pink;
}

ul li {
 display: inline-block;
 list-style-type: none;
 background-color: white;
}

<div id="container">
  
<header id="header">
  <div id="logo"><h3>Premium Trombones</h3></div>
   <nav id="navbar">
     <ul>
      <li><a href="#submit-form">Subscribe</a></li>
      <li><a href="#section1">Services</a></li>
      <li><a href="#section3">Products</a></li>
     </ul> 
  </nav>
</header> 
...
...
...
</div>

Answer 1

ul 元素有填充，添加：

ul {
  padding: 0;
}

这应该删除缩进。