Can't Make Image Responsive with CSS

Hi all,

I’m building my first tribute page. I don’t really know what I’m doing. The issue is I want to use CSS for the image link/settings for the hover effect, but I can’t make the image size responsive by setting {width: 50%; height: auto;}. If I do that, the image disappears. So I set the dimensions fixed instead, which of course look awful on a smaller screen. I suspect it has to do with the intrinsic margin/paddings of the img element. Is there a way to get around this? Please help!

Link to my tribute page: https://codepen.io/woshichennuoya/full/vYGRqom

Thank you!

if you look at the failed tests error messages it says what you should do in terms of css to make your image responsive

or review the challenge on responsive images