Issues with responsiveness in my tribute page

HTML-CSS
1

Tell us what’s happening:
I completed the challenge, but I had some questions about how I could make it better.

1.How can I change the css rules I used for the image to make it truly responsive? Even though I passed the challenge, the image does not properly scale down as I decrease the size of the browser window.
2. I have a css class in my code named .box that I had tried to use before but wanted to get rid of it. Whenever I tried to remove it from my css rules it messes up the way the page looks even though the class is never called in my html for the page. I wanted to know if someone could tell me why this happens.

Your code so far
I put a link to the code that I wrote for this challenge in the bottom

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:


Here’s the code that I wrote for this challenge
2

It’s inside a div whose width is set to a fixed 700px. Even if you changed the browser size, that 700px width won’t change, so the image wouldn’t resize either. Removing it should make your image responsive.

I’m not sure why that would be the case. You should be able to safely remove that from the CSS.

This is just a wild guess, but maybe the extra } after the ul styles is messing with you? It’s the only thing that’s off in your CSS.

Finally, you may want to remove the height from #img-div, and use margins/paddings instead of position:relative for adjusting the layout. Particularly for the #headers, as it causes a horizontal scrollbar to appear on the page.

3

Thank you so much for the help, I really appreciate it.