Why display: block for responsive image resize for Tribute Page?

Hello,
I’m working on completing the first HTML/CSS project, and from what I can tell, I’ve found a means to adhere to the requirements using max-width: 100% and height: auto for making my image responsively change size based on the parent container. When I run the tests, it tells me to use display: block; and that my image needs to be responsive still. I’m confused as to why. Here is my codepen. https://codepen.io/KillianWhite/pen/xxLMvjL

Thanks for any advice!

Update! When I added display:block, it shifted my image over to the left of its parent container. To resolve this issue, I set the margin of the image to auto which passes the test. I’m still not clear why the test failed without display: block on my image and why the image did not stay centered when adding it.

<img> or more specifically image elements are inline level elements meaning they flow like regular text elements but can have a width and height showing ‘block level properties’. When you specify display:block on any element it changes it behavior so that it begins on new lines.

MDN ref:
A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a “block”.

1 Like