Problems with the banner of my project

MDN Learn
#1

Hi! My name is Flor and I’m learning HTML and CSS. I’m doing my first project and I’m having some problems with the banner. There’s whitespace at the top of the page, and I don’t know how to fix it. I tried positioning, using “position: fixed; top= -3vh;” on the , but it’s not a solution since I resized the page and it doesn’t adapt to different viewport sizes. Can someone give me a hand?

This is my code for the banner part:

(https://codepen.io/mariaflor/pen/bGgzOBW)

#2

Hi @mariaflor,

Thats amazing to start a project. The simple answer is that your “ul” has a margin that you need to set to 0.

More importantly I approached solving this in a methodological manner:

  • My first assumption was that browsers for some reason set margin automatically so if I used the below code it would remove it. It did.
              * {
                  margin: 0;
              }
  • I realised that this was something else, after doing a bit of web research, and realised that an element was creating a margin. So I looked at the elements that were closest to the top and set the margin to 0. First was the header then the nav and finally the ul. This is when the margin disappeared.
              ul {
                  margin: 0;
              }
  • I realised that I could see if there was a margin by using the developer tools. So I selects the ul and on the layout the box model showed a margin of 16px. I am not sure where this came from still but was glad to use the dev tools to see it.

Keep up the project and thanks for sharing your issue :muscle: :star_struck: :nerd_face:

#3

Hi Ran! This is not the first time you help me, so thank you so much! I’m very grateful :sunny: I was getting so messy changing it with “position” and it was as simple as a margin! :stuck_out_tongue: I’ll have a look and implement those things.

Again, thank you :sunny:

#4

Hi Maria,
Happy to help. Good luck with the project and drop MDN a line whenever you have an issue. :sunglasses:
Ran