CodePen CSS无法正常显示

Question

https://codepen.io/jamesbcn/pen/weYdPw

我试图复制并粘贴导航栏，我正在使用CodePen，但CSS没有正确显示。

.navbar-brand {
  padding: 0px;
  height: 90px;
}
.navbar-brand>img {
  height: 100%;
  padding: 5px 15px 5px 5px;
  width: auto;
  margin: center;
}
.nav >li >a {
  margin-top: 0;
}

.nav ul{
    display: flex;
    background-color: #C2A76F;
    list-style-type: none;
    padding: 0;
}

.nav ul a{
    text-decoration: none;
    text-align: center;
    color: #FFF;
    display: block;
    padding: 5px;
    border: 2px solid white;
}

.nav ul a:hover{
    background-color: #816F4A;
}

.nav li{
    flex: 1 1 0;
}

p{
    padding-top: 10px;
    font-size: 20px;
}

Answer 1

你有几个问题，一个是你的HTML中的结构看起来不像你在CSS中所期望的那样，另一个是你将nav视为一个css类而不是一个元素（前缀带有句点的css术语意味着浏览器试图将一个元素与<div class='nav'></div>等css类匹配，而不是HTML元素<nav>）。

E.g。

.nav >li >a {
  margin-top: 0;
}

应该是

nav >li >a {
  margin-top: 0;
}