Project 4: Technical Documentation Page - Help with navbar

Hello. I want to have the navbar in the left and the main content in the right. I tried to work with flexbox (I want to excersice it, I know that is easier wit using floats) and while I change the width property to 20% for the navbar and 80% for the main content, there is a huge margin between the elements and I don’t know what causes this. Do you know how to change this? This is the codepen:

You forgot to add the link to your pen.

Why do you say it’s easier using floats than Flexbox? :smiley:

I forgot completely :laughing:. I prefer to use here floats because flexbox isn’t something I know very well (because I’m a newbie), but soon or later I will improve :grin:

P.S. the codepen is now on the first message

#navbar {
  flex-basis: 20%;
  background: red;
main {
  flex-basis: 80%;
  background: green;

A complete guide to flexbox

Thanks! I also forgot of flex-basis :grin:. I don’t know why but it is like the proportions that are stated in the width properties aren’t applied well. When I put navbar’s width to 10% and the main content to 90% it doesn’t visualize as intended (the same happens with 20%-80%).