content which is supposed to be after my nav bar rather goes under the navbar when i use display flex and position fixed.
my code CSS
.nav {
display: flex;
background-color: crimson;
width: 100%;
opacity: 90%;
justify-content: center;
position: fixed;
top: 0;
left: 0;
box-shadow: 0 2px 0 #2F4F4F;
}
.navlist {
display: flex;
}
.navlist a {
font-size: 20px;
padding: 20px;
overflow: hidden;
}
.navlist a:hover {
background: gray;
}
HTML
<body>
<!-- Start of nav section -->
<nav class="nav">
<ul class = "navlist">
<li><a href="index.html">HOME</a></li>
<li><a href="index.html#about">ABOUT</a></li>
<li><a href="index.html#biography">BIOGRAPHY</a></li>
<li><a href="index.html#contact">CONTACT</a></li>
</ul>
</nav>
<!-- end of nav section -->
<main>
<article>
<ul>
<img src="img\singing.jpg" width="300px" height="300px" >
<li><strong>1958</strong>-Born in Gary, Indiana, U.S.</li>
<li><strong>1964</strong>-Michael and Marlon joined the Jackson Brothers—a band formed by their father which included brothers Jackie, Tito, and Jermaine—as backup musicians playing congas and tambourine.</li>
<li><strong>1965</strong>-Michael began sharing lead vocals with his older brother Jermaine, and the group's name was changed to the Jackson 5.The following year, the group won a major local talent show with Jackson performing the dance to Robert Parker's 1965 hit "Barefootin'".</li>
</ul>
</article>
</main>
</body>