I am currently working on creating a product landing page for freecodecamp, and I'm facing some issues with my navbar - the first element I need to get right. Could you help me identify what's wrong with my code?
Additionally, I would like to add an image behind the navbar. You can view the image here.
Coding can be frustrating, especially when dealing with all these small but crucial details that seem to go off track. I often find myself wishing for someone to explain the code to me, but unfortunately, that luxury isn't always available.
<div class="nav-bar-wrapper">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#">link1</a></li>
<li><a class="nav-link" href="#">link2</a></li>
<li><a class="nav-link" href="#">link3</a></li>
<li><a class="nav-link" href="#">link4</a></li>
</ul>
</nav>
</div>
html{
width: 100%;
height: auto;
}
.nav-bar{
width: 100%;
height: 7vh;
background-color: #555;
}
#nav-bar a.active {
background-color: #04AA6D;
}
.nav-link{
text-decoration: none;
padding: 3px;
display: inline-block;
color: coral;
width: 25%;
}
.ul, li{
display:inline-block;
}
ul{
display: inline;
text-align: center;
padding:10px;
border: 3px solid;
font-size: 20px;
text-align: justify;
}
li{
margin: auto;
display: inline;
}
.nav-link:hover{
color: green;
}