When setting the height of my boxes to match the height of my <nav>, I encountered overflow issues. Despite using a 10rem height for the nav and a 2.25rem font, calculating the padding as 10-2.25/2 didn't result in the desired outcome. Can someone explain why this happened and how to make the boxes align perfectly with the container?
body{
background-color: hsl(168, 39%, 64%);
margin:0;
padding:0;
}
.ul-nav{
display:flex;
flex-direction:row;
flex-wrap: nowrap;
justify-content:space-evenly;
align-content:stretch;
height: 100%;
margin: 0;
list-style: none;
margin-left: 7.5rem;
}
.li-nav{
text-align: center;
}
.nav{
display: flex;
position: fixed;
margin:0;
padding: 0;
top: 0;
left: 0;
width: 100%;
height: 10rem;
background-color: hsl(178, 40%, 40%);
}
.nav-a{
text-decoration: none;
color: black;
display:block;
font: Arial;
font-size: 2.25rem;
margin: 0;
padding: 3.72rem;
}
.nav-a:hover{
text-decoration: none;
background-color: hsl(178, 40%, 30%);
}
.nav-a:visited{
text-decoration: none;
}
I'm puzzled as to why the padding calculation isn't just (height - font size) / 2. As a beginner in HTML/CSS who recently completed certification, I would appreciate a thorough explanation since this is my first project created after training.
<nav id="nav-bar" class="nav">
<ul class="ul-nav">
<li class="li-nav"><a class="nav-a" href="Grace.html">Home</a></li>
<li class="li-nav"><a class="nav-a" href="about.html">About</a></li>
<li class="li-nav"><a class="nav-a" href="pricing.html">Pricing</a></li>
<li class="li-nav"><a class="nav-a" href="reviews.html">Reviews</a></li>
<li class="li-nav"><a class="nav-a" href="contact.html">Contact</a></li>
</ul>
</nav>