CodePen CSS not displaying properly

Question

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

I'm attempting to copy and paste a navigation bar, that I'm working on into CodePen but the CSS is not being displayed properly.

.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

You have a couple of problems there, one being the structure in your HTML doesnt look like it matches what you're expecting in your CSS, and the other being that you're treating nav as a css class, rather than an element (Prefixing a css term with a period means the browser is trying to match an element with a css class like <div class='nav'></div>, rather than the HTML element <nav>).

E.g.

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

should be

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