CSS flex-box not working

HTML-CSS
1

I want to have a regular horizontal nav on the right of the page, but can’t seem to get it working.

Here is the code:

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

#header {
font-family: ‘Inconsolata’, monospace;
position: fixed;
top: 0;
left: 0;
background-color: #7244AD;
display: flex;
flex-direction: column;
width: 100%;
padding-top: 10px;
}

.logo {
font-size: 2em;
padding-left: 20px;
}

#nav-bar {
display: flex;
flex-direction: row;
justify-content: space-around;

}

li {
list-style: none;
font-size: 1.3em;
}

a {
text-decoration: none;
color: #FFF;
}

2

What is your html?
Do you have a project to show for example on codepen?

3

Do you have your <nav id="nav-bar">?

4

Hi guys sry I missed the pen. Here is the project:

In the meanwhile I have been fiddling around so now it’s better but not what I want.

Txs for your time!

5

here is the HTML btw…

French desserts
Logo goes here 
  <nav id="nav-bar"> 
    <ul> 
      <li class="nav-link"><a href="#home">Home</a></li> 
      <li class="nav-link"><a href="#about">About<a/>
      </li> 
      <li class="nav-link"><a href="#contact">Contact </a>
      </li> 
    </ul> 
  </nav> 
</header>