HTML/CSS - Problem with aligning elements in navbar - html

Question

I'm trying to make this simple website and right now I'm working on the navbar. In the navbar I also have this logo that I created with font awesome and text, it also has a bigger font size than the other elements in the navbar. My problem is that the logo text isn't aligning with all the other text in the navbar.
* {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px
}
body {
background-color: RGB(40, 43, 48);
margin: 0;
padding: 0;
}
nav {
background-color: RGB(30, 33, 36);
text-align: center;
justify-content: center;
justify-items: center;
}
.main-nav {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.main-nav li {
padding: 10px;
}
.main-nav li a {
color: white;
text-decoration: none;
font-weight: bold;
}
.push {
margin-left: auto;
}
.nav-logo {
font-size: 20px;
display: inline-block;
position: relative;
color: white;
}
.nav-logo:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
top: 24px;
bottom: 0;
left: 0;
background-color: white;
transform-origin: center;
transition: transform 0.25s ease-out;
}
.nav-logo:hover:after {
transform: scaleX(1);
transform-origin: center;
}
nav-content {}
<script src="https://kit.fontawesome.com/df395811d0.js" crossorigin="anonymous"></script>
<nav>
<ul class="main-nav">
<li>
<i class="fa-solid fa-greater-than fa-18px"></i> Terminalize
</li>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li> Python </li>
<li> Windows </li>
<li> Linux </li>
<li> MacOS </li>
<li class="nav-content push "> About </li>
</ul>
</nav>
What my navbar looks like

Answer 1

you just had to set align-items: center on your main-nav class, as shown below:
* {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px
}
body {
background-color: RGB(40, 43, 48);
margin: 0;
padding: 0;
}
nav {
background-color: RGB(30, 33, 36);
text-align: center;
justify-content: center;
justify-items: center;
}
.main-nav {
display: flex;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.main-nav li {
padding: 10px;
}
.main-nav li a {
color: white;
text-decoration: none;
font-weight: bold;
}
.push {
margin-left: auto;
}
.nav-logo {
font-size: 20px;
display: inline-block;
position: relative;
color: white;
}
.nav-logo:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
top: 24px;
bottom: 0;
left: 0;
background-color: white;
transform-origin: center;
transition: transform 0.25s ease-out;
}
.nav-logo:hover:after {
transform: scaleX(1);
transform-origin: center;
}
nav-content {}
<script src="https://kit.fontawesome.com/df395811d0.js" crossorigin="anonymous"></script>
<nav>
<ul class="main-nav">
<li>
<i class="fa-solid fa-greater-than fa-18px"></i> Terminalize
</li>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li> Python </li>
<li> Windows </li>
<li> Linux </li>
<li> MacOS </li>
<li class="nav-content push "> About </li>
</ul>
</nav>