Currently, I'm in the process of building a simple website and focusing on customizing the navbar. The logo within the navbar is created using font awesome and text, with a larger font size compared to other elements in the navbar. However, I am facing an issue where the alignment of the logo text does not match the rest of the 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>
<a href="#home" class="nav-logo"> <i class="fa-solid fa-greater-than fa-18px"></i> Terminalize </a>
</li>
<li> <a href="#html" class="nav-contents"> HTML </a> </li>
<li> <a href="#CSS" class="nav-contents"> CSS </a> </li>
<li> <a href="JavaScript" class="nav-contents"> JavaScript </a> </li>
<li> <a href="#python" class="nav-contents"> Python </a> </li>
<li> <a href="#windows" class="nav-contents"> Windows </a> </li>
<li> <a href="#linux" class="nav-contents"> Linux </a> </li>
<li> <a href="#macos" class="nav-contents"> MacOS </a> </li>
<li class="nav-content push "> <a href="#about"> About </a> </li>
</ul>
</nav>