When i scale down the browser window nav bar decreases

Tell us what’s happening:

Thanks for the help in advanced.

When i scale down the browser window the nav bar decreases instead of keeping the same width. I’m not sure why this is happening, i have compared my code with the example Tech Doc given, and have tried adding anything that i did not have in mine to see if that would make a difference but it does not.

Also unlike in the example Tech Doc i had to add a br element between my ‘li’ and ‘p’ elements, not sure how in the example doc it does it automatically. I do not notice any code that makes the space between them :face_with_head_bandage:

Your code so far
My code: https://codepen.io/Cl0udFir3/pen/qBqEoKd

Example Tech Doc from FCC: https://codepen.io/freeCodeCamp/pen/NdrKKL

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

vw is relative unit to the size of the viewport. Therefore when viewport - in here effectively the part of the codepen window in which page is displayed - is changed then size of the navbar also will change.

1 Like

You have saved my Sanity! :rofl:

would you happen to know about how in the example Tech Doc it has space between the paragraphs and the list items ?

1 Like

Search for a CSS property called line-height
Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.


There’s also margin and padding values applied to * at the top of css.

1 Like

Hey All,

I used line height, but then it increase the space between the lines of the paragraphs and list items themselves as well.

Butttttt as i was writing this Sanity came through with the clutch, once i removed the margin and padding from the universal selector it showed as wanted.

Thank you guys very much!!! :smile: :smile: