div 未覆盖其内容高度

Question

我正在尝试在不使用任何预先存在的库的情况下制作一种导航栏。

问题是我希望导航链接有填充，但标题没有覆盖它们的高度。

这是我到目前为止所做的

* {
  margin: 0;
}

.header {
  color: #fefbed;
  box-sizing: border-box;
  width: 100%;
  position: sticky;
  top: 0;
  padding-right: 4.7%;
  text-align: right;
  background-color: #115695;
  z-index: 1;
}

ul {
  box-sizing: content-box;
}

li {
  font-family: Montserratextrabold;
  font-size: 16px;
  display: inline;
  margin-left: 2%;
}

li a {
  padding: 5%;
  border: 2px solid yellow;
  color: #fefbed;
  text-decoration: none;
}

<div class="header">
  <ul>
    <li><a href="index2.html">HOME</a></li>
    <li><a href="film.html">IL FILM</a></li>
    <li><a href="gallery.html">GALLERY</a></li>
    <li><a class="selected" href="about.html">ABOUT</a></li>
  </ul>
</div>

结果是这样的。为什么？