为什么我的导航栏文字出现重叠，且未在容器内居中对齐？

问题根源 #

• CSS选择器规则使用错误：
  1. 导航栏是id="navBar"，应该用#navBar作为选择器，你错误使用了类选择器.，且大小写拼写混乱（先后出现.navBAr/.navBar/.navbar三种不匹配的写法）
  2. 逗号是并列选择器分隔符，你写的.navBar, li代表同时选中所有.navBar元素和所有li元素，并非选中导航栏下的li元素，后代选择器应该用空格分隔
• 全局样式污染：因为选择器规则错误，你给页面所有a标签都加了固定宽度、内外边距，直接导致排版错乱重叠
• 尺寸设置冲突：给a标签设置width:100px的同时加了左右各25px的内边距，实际占用宽度超出设定值，长文本内容会挤压布局

修正后代码 #

CSS部分 #

body {
  margin: 0;
  padding: 0;
  background-color: rgb(187, 190, 4);
  font-family: Arial;
}

/* 选中导航栏下的ul */
#navBar ul {
  list-style: none;
  background: #401f99;
  padding: 0;
  margin: 0;
  text-align: center;
}

/* 选中导航栏下的li */
#navBar li {
  display: inline-block;
}

/* 选中导航栏下的a标签 */
#navBar a {
  text-decoration: none;
  color: #fff;
  display: inline-block;
  padding: 30px 25px;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

/* 选中导航栏下a标签的hover状态 */
#navBar a:hover {
  background: rgb(84, 109, 221);
}

HTML部分无需修改，沿用原有代码即可： #

<div id="navBar">
  <ul>
    <li><a href="index.html">HomePage</a></li>
    <li><a href="/mainPages/googleForm.html">Google Form</a></li>
    <li><a href="/mainPages/myMovies.html">Movies</a></li>
    <li><a href="/mainPages/myTvShows.html">Shows</a></li>
    <li><a href="/mainPages/topMovies.html">Top Movies</a></li>
    <li><a href="/mainPages/topTvShows.html">Top Shows</a></li>
  </ul>
</div>

内容的提问来源于stack exchange，提问作者SunnyMoon25