CSS: Trying to get rid of the extra space below the navigation panel-CodePudding

So I'm trying to study in advance about css/html. I wanted to get rid of the extra space after the navigation pane and i can't remove it. can someone help me? thanks. also I'm having a hard time putting some elements on every section and putting some animation in it(any recommendations?)

**/* what line should i edit*/**

body {
  font-family: 'Roboto', sans-serif;
  padding: 0;
  margin: 0;
    box-shadow: 0px 0px 0px #dedede;
}

h1 {
  text-align: center;
  padding: 50px 0;
  font-weight: 800;
  margin: 0;
  letter-spacing: -1px;
  color: inherit;
  font-size: 40px;
  }
  

  
 section {
  height: 100vh;}
  
  

  nav {
  width: 100%;
  margin: 0 ;
  background: #fff;
  padding: 0px 0;
  box-shadow: 0px 5px 0px #dedede;
}

nav ul {
  list-style: none;
text-align: center;}

nav ul li {
display: inline-block;}

nav ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 ;
}
{
nav ul li a,
nav ul li a:after,
nav ul li a:before 
transition: all .5s;
}


  
  nav ul li a:hover {
  color: #555;}

<html>
    <head>
    <title> Main Page </title>
        <link rel="stylesheet" href="navpanecss.css">
    </head>

        <h1> MY WEBSITE </h1>
        
 <nav >
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">More</a></li>
      <li><a href="#">Nice staff</a></li>
    </ul>

  </nav>
 
<section style="background: #D7FFF1">
<article>
 
      </article>
</section>
<section style="background: #aafcb8">
          
    <nav >
            
  </nav>

</section>
</section>
<section style="background: #FFA69E">
    <nav >
    
  </nav>
</section>
</html>

CodePudding user response：

You can use float: left; on nav, or margin: 0 0 5px; on ul.

CodePudding user response：

According to w3schools UL element has default of 1em in margin on both the bottom and the top.

Easy solution is to specify in your CSS for all UL element to be with 0 margin like so

ul {
  margin: 0; // or margin: 0 0 5px; like Medda86 suggested
}

Or if the default marging is good for all other use-cases just add it to the nab UL selector that you already have

About placement and animation, do you want to elaborate more about what will trigger an animation and what element would you like to have the animation?

CodePudding user response：

Simple way to remove those default styles for <ul>, add styles margin:0;padding:0; into the ul tag.

Like this

ul {
  margin: 0; // removing default margin style
  padding: 0; // removing default padding style
}

If you want to add some animations when the mouse hovers on links,

Here's the ref link - https://ianlunn.github.io/Hover/

I hope this is helpful!