Technical Documentation project - Cannot pass navbar layout test

#1

Hi, I am trying to complete the Technical Document page project and have all of the tests passed except for one of the layout user stories:

“On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.”

My navbar is aligned to the left on regular devices and is fixed when scrolling. Could anyone look at my Codepen here and see if they can spot the issue? Thank you!

PS. My Futurama lorem is from here if anyone is interested.

#2

Move the .sideNav class to the nav element and remove the div that currently has that class on it.

Edit: I suspect the failing test has to do with the nav child element being position fixed and out of flow (the nav is collapsing and it might be messing with the bounding box check).

#3

Brilliant, I just changed the css using the .sideNav class to use the #navbar id that I already had on the <nav> element and it worked instantly. Thank you so much!

#4