Logo as link to Home-page - html

Question

When I set the logo as a link, my menu moves to the right. When I inspect the menu, I see that I get an extra menu link to the left of the menu that is not visible otherwise and which leads to index.html Does anyone know what is the reason for this?
#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>
<img id="logo" src="https://via.placeholder.com/400x400.jpg" alt="">
</div>
<div id="menu">
<a href=index.html>Home</a>
<a href=index.html>About</a>
<a href=index.html>Contact</a>
</div>
</nav>

Answer 1

Change the css nav ato nav #menu a- Hope it fix the style.
#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 #menu 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>
<img id="logo" src="https://via.placeholder.com/400x400.jpg" alt="">
</div>
<div id="menu">
<a href=index.html>Home</a>
<a href=index.html>About</a>
<a href=index.html>Contact</a>
</div>
</nav>