Cannot center or raise navbar link items - something forcing them to the right and stopping me from raising them

Question

I cannot center or raise navbar link items in an unordered navigation bar link in plain CSS.

I want to have the links of the navbar to be in blocks that go to the top of the screen and cover the entire height of the navbar area and I want all items to be centered.

There is 0 margin padding border on the body and I have even tried on codepen to isolate the navbar and try it and it still wont work.

So how can I get the navbar links to take up the entire height of the navbar area - and how can I center the navbar items/links as they are slighlty pushed to the right and not centered.

For practice: https://codepen.io/pen/

nav {
  
  margin: 0px;
  border: 0px;
  padding: 0px;
  position: fixed;
  top: 0;
  width: 100%;
  height: 48px;
  background-color: darkslategrey;
  width: 100%;
 

}

nav ul {
  background-color: ;
  text-align: center;
  align-items: center;
  
} 

nav ul li {
  background-color: ;
  display: inline-block;
  margin: 0px;
  text-align: center;
  align-items: center;
}

nav li a {
  
  color: #FFFFFF;
  background-color: lightgreen;
  display: inline-block; 
  text-decoration: none;
  font-size: 16px;
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 8px;
  padding-left: 40px;
  line-height: 4px;
  height: 15px;
  margin: 0px;
  border: 0px;
  
}

nav li :visited {
  color: #FFFFFF;

<nav>
    <ul>
      <li> 
        <a href= "#homeSection">Home</a> 
      </li>
      <li> 
        <a href= "#firstSection">First</a> 
      </li>
      <li> 
        <a href= "#secondSection">Second</a> 
      </li>
      <li> 
        <a href= "#thirdSection">Third</a> 
      </li>
      
      </ul>
    </nav>

Answer 1

Remove the margin and padding on the ul element.

.nav ul {
    padding: 0;
    margin: 0;
}

You should also remove the height property from nav, that way it will grow as tall as needed to fit the ul.