CSS flex-box not working

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;

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

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

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!

here is the HTML btw…

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