Приветствую. Имеется кусок CSS + HTML ниже, хотелось бы узнать почему border-bottom уменьшает height на 5px несмотря на то, что box-sizing стоит border-box?
#wrapper {
background-color: #1d1d1d;
font-family: "Lato", sans-serif;
color: #8b58cf;
font-weight: bold; }
#top {
position: fixed;
width: 100%;
height: 10vh;
background-color: #1d1d1d;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px; }
nav {
height: 100%;
width: 60%; }
nav #navmenu {
display: flex;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
justify-content: center;
align-items: center; }
nav #navmenu .navmenuitem {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
height: 100%;
width: 25%;
transition: color, background-color 0.2s ease-in 0s;
box-sizing: border-box; }
nav #navmenu .navmenuitem:hover {
background-color: #8b58cf;
color: #242424; }
nav #navmenu .navmenuitem:first-child {
border-bottom: 5px solid #8b58cf; }
<div id="wrapper">
<header id="top">
<nav id="nav">
<div id="navmenu">
<div class="navmenuitem"><span>ABOUT</span></div>
<div class="navmenuitem"><span>SKILLS</span></div>
<div class="navmenuitem"><span>PROJECTS</span></div>
<div class="navmenuitem"><span>CONTACTS</span></div>
</div>
</nav>
</header>
</div>