Html 导航栏中的链接显示在一起

我在一个网站上工作，它有一个水平导航栏，使用无序的链接列表，尽管为链接设置了填充，但这些链接仍然显示在一起。我怎样才能纠正这个问题

我正在编写一个W3Schools教程（），我基本上复制了他们在水平导航栏部分所做的工作

我尝试过为列表项而不是链接设置填充，但没有任何区别

/*导航栏：*/
#topNavDiv{
显示：块；
边框样式：实心；
背景色：黑色；
溢出：自动；
}
#顶级导航列表{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
.topNavListItem{
浮动：对；
}
.topNavListItem，a{
位置：相对位置；
右：50px；
显示：块；
填充：10；
文字装饰：无；
颜色：白色；
背景色：黑色；
}

您有一个错误的填充值，应该是

填充：10px（带px）


/*导航栏：*/
#topNavDiv{
显示：块；
边框样式：实心；
背景色：黑色；
溢出：自动；
}
#顶级导航列表{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
.topNavListItem{
浮动：对；
}
.topNavListItem，a{
位置：相对位置；
右：50px；
显示：块；
填充：10px；
文字装饰：无；
颜色：白色；
背景色：黑色；
}