Struggling to Navbar Issues

Hi guys. I am struggling to figure out how to separate my navbar from my main section. The text of the bar is covering the Paragraph texts as it scrolls. Link below for the page.

My recommendation would be to use flexbox to position the <nav> and <main>. At narrow widths you want the menu on top of the content and at wider widths you can put the menu on the left.

1 Like

The simple solution would be to just give #main-doc some margin-left. But that doesn’t deal with how you want the page to look at small screen sizes.

1 Like

Hey, thanks for the feedback. Still struggling with figuring out how to do this as well I’m afraid :sweat_smile:
Not sure what I’m missing so any help is appreciated.

First, you need to move those <img>s into <main> (at least I’m assuming that’s where they should go). And then you need to move <main> into the flex-container. Then you would use the appropriate flexbox properties on the flex-container to put <nav> to the left of <main>. But you would only want to do this when you have enough horizontal room. So you would use a CSS break point to add the flexbox properties after a certain width. Also, be sure to use em units for the break point so that it takes both width and text size into account.

1 Like

thank you bbsmooth, will try things out. Thank you for the help :slight_smile:

Hey Guys. Managed to figure out how to margin it to the left but I’m stuck on the Break Point part of the code, not sure where I’m putting it within the CSS code. Also, I’m not sure if I’ve put the Main Section within a Flex Container