无法居中或提升导航栏 link 项 - 某些东西迫使它们向右并阻止我提升它们

Question

我无法在无序导航栏 link 中居中或提高导航栏 link 项 CSS。

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

主体上有 0 个边距填充边框，我什至尝试在 codepen 上隔离导航栏并尝试它，但它仍然不起作用。

那么我怎样才能让导航栏 link 占据导航栏区域的整个高度 - 我怎样才能将导航栏 items/links 居中，因为它们被轻微地推到右边并且不居中。

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 中删除高度属性，这样它就会根据需要长到适合 ul 的高度。

无法居中或提升导航栏 link 项 - 某些东西迫使它们向右并阻止我提升它们

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

html

css

inline

html-lists

navbar