Portfolio page error (navbar & h. viewport)

Hello!

I’m trying to figure out two errors of my project. Been searching for solution in freeCodeCamp forums but didn’t find working solution for my project. I’d really appreciate if someone helped to understand those errors. :slight_smile:

Project URL: https://codepen.io/Esmaabi/full/powEqjO

Errors:

  1. The navbar should contain at least one link that I can click on to navigate to different sections of the page.

*** The navbar contain links that forward to section of page. I don’t understand why it’s displaying that error.**

  1. The height of the welcome section should be equal to the height of the viewport.

*** The height of the welcome section should be exactly 100vh with navbar included. I don’t understand how to fix it.**

Thank you!

It’s because you are putting a scroll on <main> which is confusing the FCC tests. Is there a reason you are doing this. When I remove the scroll from <main> it still seems to function properly (and it passes this test).

Where are you setting the height of #welcome-section to 100vh? Also, you might want to apply box-sizing: border-box to this section so that the padding is included in the height.

Thanks!

Firstly added the 100vh to “.welcome” but should have added to “#welcome-section”. Now the height of viewport error is gone! :slight_smile:

But the navbar error still exists. I tried to remove the scroll properties from the main section which eliminates the error but I am not quite happy with removing this:
scroll-snap-type: y mandatory; overflow-y: scroll; overflow-x: hidden;

But the main problem is that when I remove those properties I don’t get the full page scroll working which I think is good for portfolio page.
Secondly on the left corner of the page appears a blank area out of nowhere. Marked it with yellow color.

Any help how to get rid of that part OR how to make portfolio page work with :
scroll-snap-type: y mandatory; overflow-y: scroll; overflow-x: hidden;

I hope I can find a solution! :slight_smile: