Logo Link Causing Menu Alignment Issue
After setting the logo as a link, the menu unexpectedly shifts to the right. Upon inspecting the menu element, it appears that there is an additional hidden menu link on the left side leading to index.html. Can anyone shed light on the possible cause of this issue?
#logo {
height: 64px;
position: absolute;
left: 20px;
}
#menu {
display: flex;
flex-direction: row;
justify-content: center;
}
nav {
width: 100%;
background-color: #000000;
height: 64px;
display: flex;
flex-direction: row;
justify-content: center;
}
nav a {
text-align: center;
font-size: 25px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
color: white;
text-decoration: none;
transition: .9s;
}
nav a:hover {
background-color: orange;
transition: .9s;
}<nav>
<div>
<a href="index.html"><img id="logo" src="https://via.placeholder.com/400x400.jpg" alt=""></a>
</div>
<div id="menu">
<a href=index.html>Home</a>
<a href=index.html>About</a>
<a href=index.html>Contact</a>
</div>
</nav>