Nils' FCC Portfolio Page

Hi,
I’ve completed my 1st pass at the Portfolio challenge, but I’m not completely happy with the final look of the page.

I have the following questions on why things aren’t working as expected, and how to fix them:

  1. Why is the far right nav button flowing further to the right than the edge of the div below?

  2. How do you get buttons in About/Portfolio/Contact order? I know the cause of them being in the Contact/Portfolio/About order is due to having float:right in the li css. But if I move it to the ul css, it orders the buttons vertically & they are as wide as the whole screen.

  3. When the About or Portfolio buttons are clicked, why don’t they jump to the top of the div? I’m guessing it actually is working correctly, but the top of the div is behind the fixed nav bar. How do I make it jump so the top of the div is below the nav bar?

  4. Is there a way to have the About div (grey one on the top) dynamically start under the nav bar? It’s currently hard coded to start as close as possible below it.

  5. Why is there a white gap between the grey About div & the blue Portfolio div?

  6. Why is the email icon a different size than the other icons in the Contact div at the bottom? I’d like to either shrink it, or increase the size of the other icons so they’re all the same size.

  7. In the example Portfolio page given in the FCC assignment (https://codepen.io/FreeCodeCamp/full/YqLyXB/), is the dynamic nav button highlighting that occurs when you scroll down the page done using Javascript? I couldn’t find a way to do it using only CSS. .

Thank you very much for your help and time,
Nils