Tell us what’s happening:
Describe your issue in detail here.
I am trying to center the image on the page but for some reason it won’t center. I displayed blocked it but nothing worked. Please help! also having trouble setting the image to max-width 100%.
**Your code so far**
/* file: index.html */
<main id ="main">
<h1 id ="title">Dr. Norman Borlaug</h1>
<div id ="img-div">
<div id="img-caption">
<img id="image" src="https://cdn.theatlantic.com/thumbor/1eLgsh6WVKKyOvSZQj8Lghm9iGQ=/1200x800/media/img/photo/2020/04/photos-essential-work-farmers-coron/f01_1216824338/original.jpg">
<p id="tribute-info">
The man who saved a billion lives
</p>
<a id ="tribute-link" target ="_blank" href="https://en.wikipedia.org/wiki/Norman_Borlaug">Wikipedia Entry</a></div>
</div>
</main>
/* file: styles.css */
#image{
max-width:100%;
height:100% auto;
display:block;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Challenge: Build a Tribute Page
Link to the challenge: