Project Landing Page Improvements

https://codepen.io/colfah/pen/MdOEap

I tried to recreate the project landing page but with a hero image taking up the full screen.

I’m passing all of the tests but there are some things in it that aren’t working/ I don’t understand.

The big trombone (background-image) was initially set to display: contain. However, the navbar was displaying over much of it. I tried fixing this with padding-top but I when I went to mobile view there was way too much padding-top in this view.

I eventually fixed this problem by setting display: auto for large screens and display: contain for small screens. This appears to work but I don’t really understand what I have done.

Also the navbar is covering over the first paragraph when I click “how it works”

I’d like to improve the spacing of the elements on display in the div “container-content”…the initial writing, email input and submit buttom. I have activated flex but it just won’t work for me. I don’t know why.

For some reason the page is telling me to scroll horizontally (just a bit).

I can’t get padding to work on the right hand side of the nav bar

It’s probably something obvious that I’m missing but any help would be greatly appreciated!

Maybe you could post a link to your codepen project so we can take a look.

DOH!

https://codepen.io/colfah/pen/MdOEap