Tribute Page - Build a Tribute Page

Tell us what’s happening:

I’m confused, why is this not being accepted as an “img element with an id of image” ?

I’m starting off my img element like this:

<img id=“image” src"…

Also , why am I being told my image width needs to be set to 100%, when it is?

Here’s my css:

   .image {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

The rest of my code:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <main>
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tribute Page</title>
    
</head>
<main id="main">
<body>

    <div id="main">
        <h1 id="title">Dr. Norman Borlaug</h1>



        <div id="img-div">
            
      <div id="image">  
          <img id="image" src="https://thecounter.org/wp-content/uploads/2020/04/man-who-tried-to-feed-the-world-borlaug-with-wheat-april-21-2020-1410x0-c-default.jpg" alt="Dr. Norman Borlaug"> 
</div>
            <div id="img-caption">Dr. Norman Borlaug, known as the father of the Green Revolution.
       
        
        </div>
</div>

        <div id="tribute-info">
            Dr. Norman Borlaug was an American agronomist and humanitarian who is credited with saving over a billion people from starvation through his work in developing high-yielding varieties of crops.
        </div>

        <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Learn more about Dr. Norman Borlaug</a>
    </div>

</body>
</main>
</html>
/* file: styles.css */

        body {
            font-family: Arial, sans-serif;
            background-color: lightgreen;
            margin: 0;
            padding: 20px;
        }
        
        main {
            text-align: center;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: auto;
        }
        
img {
            display: block;
                        

        }

        .img-div {
            margin: 20px 0;
        }
        
        .image {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        
        .img-caption {
            font-size: 0.9em;
            color: #666;
            margin-top: 5px;
        }
        
        .tribute-info {
          display: inline-block;
          padding-top:50px;}
        
        .tribute-link {
            display: inline-block;
            margin-top: 20px;
            padding: 10px 15px;
            background: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 20px;
        }
        
        .tribute-link:hover {
            color: #ffffff;
        }
  

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

You have two main element opening tags here? The first one should be deleted because main elements should go inside the body and not above the head.

I suggest you pass your html code to an online validator in case there are other errors as well that should be addressed.

to answer to your question, you have here the id, so the img is not detected and the test fails. Ids must be unique, a certain id can exist only once in the page. The HTML Validator will highlight this issue with others