Home > Blockchain >  How Do I remove the small white space between my navbar and the next section? How do I remove the sm
How Do I remove the small white space between my navbar and the next section? How do I remove the sm

Time:11-15

I'm coding this website as the last project of the HTMl course on freecodecamp, and I'm running into two errors I don't know how to fix. On the one hand, a small white line stays between my navbar and my first section. On the other hand, I use a hover selector to make the background of my nav bar links gray, but a small darker line stays at the bottom.

Here is what the white line looks like: enter image description here

To fix the first white line, I've tried removing paddings and margins (which removed some of the whitespaces on the edges, but not the one that's left, between the two sections. I also changed all the CSS backgrounds to blue to find out which section was filling in the space, and it only turned blue when I changed body's background, which already has margins and padding set to 0.

Here is what the little black line looks like: enter image description here As you can see, there is a little black line below the grey background!

For this one I tried understanding what exact space the different tags in my navbar take (li, ul, a...) to no avail, I don't really understand how these tags decide to take up space, or not within the navbar. I couldn't find any of the tags that took that extra black line space.

Here is the 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' >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>

And here is the 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);
}

Thanks a lot for the help!

CodePudding user response:

Try

* {
  padding: 0;
  margin: 0;
}
  • Related