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?
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.
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.