After centering all text within the li tags, the last one appears to be slightly closer to the bottom. Below is the code snippet along with an image:
*{
margin:0;
padding:0;
box-sizing:border-box}
#hamburgerClick{
display:block;
width:65px;
height:65px;
position: fixed;
overflow: hidden;
top:50px;
left:50px;
cursor: pointer;
z-index:9999999999999;
}
header h1{
width: 100%;
text-align:center;
color:white;
background: #252525;
}
header{
flex-direction: column;
padding:0;
}
header ul{
flex-direction: column;
height:100%;
width:100%;
height:100vh;
display:flex;
list-style:none;
transition: ease .8s;
justify-content: space-between;
}
.ultog{
transform: translateX(0%);
}
header ul li{
text-align:center;
width:6em;
font-size: 1.1rem;
box-sizing: border-box;
width:100%;
height: 100vh;
background:#131313;
color:white;
border-top: 2px solid #252525;
display: flex;
justify-content: center;
align-items: center;
font-size:2em;
cursor: pointer;
margin:0;
}
header ul li:nth-child(1){
border: none;
} <div id="hamburgerClick">
<div id="hamburger"></div>
<div id="hamburger2"></div>
<div id="hamburger3"></div>
</div>
<header id="header">
<h1>Photo21</h1>
<ul>
<li>Home</li>
<li>Products</li>
<li>Career</li>
<li>About us</li>
<li>Contact</li>
</ul>
</header>