How can I eliminate the small white space between the navigation bar and the next section? How to get rid of the little gray space on hover selector?
I'm coding this website as the final project for my HTMl course on freecodecamp and I'm running into two errors that I don't know how to fix. On one hand, I have a little white line between my navigation bar and the first section. On the other hand, I use the hover selector to make the background of the navigation bar link gray but still keep a small dark line at the bottom.
The white line is as follows:
To fix the first white line, I tried removing the padding and margin (this removed some of the whitespace on the edges, but not the remaining whitespace between the two sections. I also changed all CSS backgrounds to blue color to find out which part fills the space, and it only turns blue when I change the background of the body, which already has margins and padding set to 0.
This is what the little black line looks like: As you can see, there is a small black line underneath the gray background!
For this, I tried to understand the exact space occupied by different tabs in the navigation bar (li, ul, a...) but to no avail, I really don't understand how these tabs decide to take up space or not in the navigation bar middle. I can't find any labels taking up extra black line space.
This is HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Double Team Cooking</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<section id="welcome">
<nav id='navbar'>
<ul>
<li><a href="#whodis">Who Am I?</a></li>
<li><a href="#Projectos">My Projects</a></li>
<li><a href="#hola">Contact</a></li>
</ul>
</nav>
</section>
<section id='Who-Am-I'>
<h2 id='whodis'>Who Am I?</h2>
<p> Hey, I'm Pedro.</p>
<p> A man, a cook, a student, a coder, a business developer, a problem solver.</p>
</section>
<section id='Projects'>
<h2 id='Projectos' class="project-title">My Projects</h2>
<p>So, what am I working on?</p>
<div id="electriccar"></div>
<div id="website"></div>
<div id="TWR"></div>
</section>
<section id="Contact">
<h2 id="hola">Contact Me</h2>
<p>You'd like to reach out? Of course! Feel free to reach out to me through these mediums!</p>
</section>
</body>
</html>
This is CSS:
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
width: 100%;
padding: 0px;
margin: 0px;
}
nav {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: 40px;
background-color: rgb(24,24,24);
}
nav ul {
display: flex;
justify-content: space-evenly;
list-style-type: none;
padding-left: 0px;
width: 100%;
height: 100%;
margin: 0px;
align-items: center;
}
nav li {
display: inline-block;
}
li a {
text-decoration: none;
color: white;
padding: 10px;
}
li a:hover {
background-color: rgb(64,64,64);
}
#Who-Am-I {
height: 100%;
background-color: rgba(0,30,0,0.8);
}
Thank you for your help!
