Hello. 👋 I am stuck on the test

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:

Hi

I think you might have forgotten to add
<link rel="stylesheet" href="styles.css">
in your HTML to link your stylesheet and apply your CSS.

Hello. I added the link element but it still doesn’t seem to work…

Could you post your code again?

is it supposed to be outside of main element?
Preformatted text

Dr. Norman Borlaug

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

CSS:
#image{
max-width:100%;
height:100% auto;
display:block;

}

Yes - try putting it above your main element.

To format your code in a forum post, you can select your code and use the </> button to format it so it will display correctly .

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.