Code:
Issue Description: I'm facing two problems with my code. The first problem is that when I add another element, like a p-tag, underneath the navigation bar section, it gets hidden under the navigation bar. The second issue is related to the image highlighting functionality - when hovering over the image, the background color of the entire height doesn't change as intended. Additionally, any changes made in other sections of the code can disrupt the vertical alignment of the image. I've been struggling with these errors for some time now and could really use some help from the community.
<HTML>
<Head>
<style>
body {
margin: 0;
}
div.Header {}
div.Navigation {
padding: 0;
margin: 0;
list-style: none;
line-height: 50px;
height: 50px;
width: 100%;
background-color: #001a33;
position: absolute;
overflow: hidden;
z-index: 2;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
div.Navigation>a {
display: block;
flex-grow: 1;
text-align: center;
}
div.Navigation a img {
height: 22.1;
width: 44;
vertical-align: middle;
}
div.Navigation a:visited,
div.Navigation a:active,
div.Navigation a:link {
color: white;
text-decoration: none;
}
div.separator {
margin-left: 60%;
}
div.Navigation a:hover {
background-color: #000d1a;
}
</style>
</Head>
<Body>
<div class="Header">
<div class="Navigation">
<a href="#"><img src="icons/home-button.png" /></a>
<a href="#">Ongoing Projects</a>
<a href="#">Purchase Service</a>
<div class="separator"></div>
<a href="#">Employment</a>
<a href="#">Portfolio</a>
<a href="#">About</a>
</div>
</div>
<div class="Main">
</div>
<div class="Footer">
</div>
</Body>
</HTML>