div not covering its content height - html

Question

I'm trying to do a sort of nav bar without using any pre existing library.
The problem is that I want the nav links to have a padding but the header is not covering their height.
Here's what I've done so far
* {
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>HOME</li>
<li>IL FILM</li>
<li>GALLERY</li>
<li><a class="selected" href="about.html">ABOUT</a></li>
</ul>
</div>
The result is this one. Why?

Answer 1

This is because a tags are inline elements. Inline elements treat margin and padding differently than block elements. You can add left and right properties, but not top or bottom.
You can change the display to inline-block which will respect the top and bottom padding you set.
* {
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;
display: inline-block;
}
<div class="header">
<ul>
<li>HOME</li>
<li>IL FILM</li>
<li>GALLERY</li>
<li><a class="selected" href="about.html">ABOUT</a></li>
</ul>
</div>
EDIT
I did mark this as a duplicate, but wanted to give an answer, because OP asked why the header wasn't expanding - and the duplicated doesn't answer the question explicitly.