As a new programmer, I am currently working on creating a navbar. However, I have encountered an issue where there are small gaps underneath the user when my cursor hovers over it.
There is a white gap under the user element.
I expect that the hover background color will fill up the entire height without leaving any gaps.
https://i.sstatic.net/0fzs9kCY.png
https://i.sstatic.net/CQjQPyrk.png
nav {
height: 50px;
background-color: rgb(255, 255, 255);
justify-content: space-between;
align-self: center;
}
nav li {
float: right;
margin: 0;
}
nav>ul {
list-style-type: none;
display: block;
padding: 0px;
margin: 0px;
overflow: hidden;
}
nav>ul>li>a {
text-decoration: none;
color: rgb(0, 0, 0);
padding: 15px;
display: block;
text-align: center;
}
li a:hover {
text-decoration: none;
display: flex;
transition: .0s;
height: 100%;
color: rgb(255, 255, 255);
background-color: rgb(255, 178, 54);
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<header class="header">
<?php session_start(); ?>
<nav>
<ul>
<?php if (isset($_SESSION['status']) && $_SESSION['status'] == "login") { ?>
<li><a class="roboto-medium" href="#">STORE</a></li>
<li><a class="roboto-medium" href="#">CONTACT</a></li>
<li><a class="roboto-medium" href="#">HOME</a></li>
<?php } else { ?>
<li>
<a class="fa fa-user" href="#"></a>
</li>
<li><a class="roboto-medium" href="#">REGISTER</a></li>
<?php } ?>
</ul>
</nav>
</header>