Navbar creating empty space down and above when adding logo - html

Question

I want to make the navbar with logo. but its creating empty space below when adding height or width.
is there any css property I can use?
it does not look good like this.
this is navbar without logo
this is navbar with logo:
html:
<section id="header">
<a class="name" href="#header"
>SYNCC
<img
src="images/logo.png"
alt=""
height="90"
class="logo-png"
/></a>
<div>
<ul id="navbar">
<li><a class="active" href="#hero">Home</a></li>
<li>Features</li>
<li>About Us</li>
<li>Contact</li>
<li>
<a href="#carouselExampleControls"
><i class="fa-solid fa-cart-shopping"></i
></a>
</li>
</ul>
</div>
</section>
css:
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 80px;
/* background: #e3e6f3; */
background: #E5E6EE;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
right: 30%;
}
#navbar {
display: flex;
align-items: center;
justify-content: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
}
.name {
font-family: "DynaPuff", cursive;
text-decoration: none;
font-size: 25px;
font-weight: 400;
color: #1a1a1a;
position: relative;
top: 10px;
}
.name:hover,
.name a {
color: #088178;
transition: 0.3s ease;
}
.name a::after,
.name a:hover {
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#navbar li a:hover,
#navbar li a.active {
color: #088178;
transition: 0.3s ease;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
tried using display : block;
I tried several ways to fix it.
any other way can use to make it correct.

Answer 1

Usally when this happens to me, I will just add top:--px; or bottom:--px; accordingly to make them line up.