Responsive technical documentation page - changing width with flexbox?

Hi,
I’m using flexbox to structure my tech documentation page, but keep running into issues. I’m trying to make it responsive, and go from two columns to one like the example codecamp provides: https://codepen.io/freeCodeCamp/full/NdrKKL
However, I can’t figure out how to make the width of my navbar 100%. I’ve tried width: 100% and flex: 100% with no success. Any insight into what’s going on/how to go about this would be much appreciated.
The background of the navbar is black so I can see the size of it, just fyi.
my code: https://codepen.io/kianaml/pen/vPZLyL?editors=1100
Thanks!

It’s because you have the fixed position on the navbar which takes it out of the normal page flow. Anything that gets the position fixed or absolute won’t respond to your flexbox CSS. I hope that helps. Try to remove the fixed css when you get below your 800px media query. If you want me to fork your code and show you, just let me know. Good luck :slight_smile: