First HTML/CSS challenge/test

So I just “finished” my first html/css test/challenge thing where I have to build a tribute page. Only that I don’t feel like I ticked all the boxes. First of I was never able to center the image. for some reason I was not able to center the whole page even tho I used margin: auto;

I did set max-width: 100%; to prevent it from going past that but was that enough?

When I sent in the solution I was hoping to see if I missed anything or see what I got wrong so that I can start correcting it before figuring out the centering problem but instead I was presented with a 20% finish which means I cleared the test… Is something going on in the background here to evaluate it or should I just move on to the next one?

Please post a link to your codepen so we can see your project and its code.

Here it is.

image is not the correct way to select the img element. Therefore, your max-width, display, and margin styles are having no effect on it. Use the proper selector to select your img element and it should work.

Woops sorry forgot to add the # :confused:
But why was it marked as cleared or correct even tho it wasn’t?
And why is margin: auto not centering in main?

Because <main> is a block level element by default and thus it will expand to fill the entire width of its parent unless you tell it otherwise using CSS. So there is nothing to center because <main> takes up the entire width of the page. If you do want to put a width on <main> then I highly recommend you use max-width so that when you narrow the view port you don’t get a scroll bar.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.