Making layout responsive with flexbox column not working?

HTML-CSS
#1

Hi,
I’m working on the technical documentation project and trying to make it responsive using flexbox. I thought in order to make the navigation bar move from its position on the left to horizontally stacked above the right content (for one solid page similar to the example linked below) I’d use flex-direction: column on the container. However, it’s not working for me and I can’t figure out why. Any help/explanation would be appreciated!

my code: https://codepen.io/kianaml/pen/vPZLyL?editors=1100
what I’m trying to create: https://codepen.io/freeCodeCamp/full/NdrKKL

#2

There needs to be a space between the and keyword and the parenthesis ()

You have:

@media screen and(max-width: 800px){  
  #container{
  flex-direction: column;
  }
}

Should be:

@media screen and (max-width: 800px){  
  #container{
  flex-direction: column;
  }
}

It won’t really do what you want on it’s own though.

#3