无法居中或提升导航栏链接项目 - 迫使它们向右移动并阻止我提升它们

Question

我无法在纯 CSS 中的无序导航栏链接中居中或提升导航栏链接项。

我希望导航栏的链接位于屏幕顶部并覆盖导航栏区域的整个高度的块中，并且我希望所有项目居中。

body 上的边距填充边框为 0，我什至尝试使用 codepen 来隔离导航栏并尝试它仍然无法工作。

那么如何让导航栏链接占据导航栏区域的整个高度 - 以及如何将导航栏项目/链接居中，因为它们被轻微推到右侧而不是居中。

练习：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

移除 ul 元素的边距和内边距。

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

您还应该从nav 中删除 height 属性，这样它就会增长到适合ul 所需的高度。