Need help with my Personal Portfolio Page - sticky navbar

Hi there!

I’m VERY new in all this and I needed some help with a few stuff in my project “Personal Portfolio Page”.

When you open it (https://codepen.io/carolaggio/pen/BajPRQR) , you can see (among others, I know, please be kind!) :

  • My <nav> isn’t sticking to the top of the page
  • I have white spaces between my elements and on the left and the right of them
  • The text in the first third of the page isn’t vertically centralized
  • The space between the links in both <nav> and <footer> isn’t enough to look good

The first problem listed above is what I need to fix to pass this test (and it’s making my brain boil!), but the other details are making my OCD hit the roof!

Plisss haaalp!

Hi carolaggio,
to make the nav stick to the very top add top: 0px;. That should make the test pass.

  • white spaces > these are default margins on the <body> (small all around the page) and headline tags (horizontal). Try right clicking and “inspect element” to see them highlighted with developer tools. On the right under “computed” there should be a little box that illustrates what’s going on. Then override them as needed.

e.g.
image

2 Likes

Thank you, Michael!

You helped me passing the test with the first solution!

Unfortunately, the other suggestions haven’t worked in my project. For some reason, they wouldn’t place the elements anywhere different from the original place…as if there’s something in my code blocking them to obey the new rules.

I couldn’t find the “Computed” depicted in your screenshot in my “Inspect” window. But be patient, it’s my first contact with it all and I’ll get there someday :smiley:

1 Like

No worries, the FCC forum is all about such questions.

Each browser’s dev tools are a little different, yet similar. They are invaluable to solve this type of issues. Where to find the box model illustration in …

Firefox:

Chrome:

(First screenshot was from Safari.)

In the CSS box on codepen you have <style> and </style>. These are not needed in there. This box behaves like a .css file. I noticed that this actually makes the rendering a little funky. e.g. I tried to remove the margin around the body element by adding margin: 0; but nothing happened until I removed them. I think they should go first … then maybe fix one issue after another …