Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tribute Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main id="main">
    <h1 id="title">Dr. Norman Borlaug</h1>
    <div id="img-div">
      <img id="image">
      <figcaption id="img-caption">Nobel Peace Prize Winner</figcaption>
    </div>
    <div id="tribute-info">
      <p>Dr. Norman Borlaug was a renowned agronomist and humanitarian...</p>
    </div>
    <a id="tribute-link" href="https://example.com" target="_blank">Learn More</a>
  </main>  
</body>
</html>

/* file: styles.css */
img{
  max-width:100%;
  max-height:100%;
  height:auto;
  display:block;
}

 img-div {
   display: flex;
   justify-content: center;
   align-items: center;
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

Your img-div selector is missing something, it should be an id selector.

You have to make the flexbox direction a column for the centering to work. Otherwise, the img and figcaption elements will be side by side causing the image not to be centered inside the container.