Tribute Page - Build a Tribute Page

HTML-CSS
1

Hi everyone,

I was confused why I can’t pass the test for the following requirement:
1.Your img element should have a display of block
2.Your #image should have a max-width of 100%
3.Failed:Your #image should be centered within its parent

Expecaily, for the requirement three. What’s "within its parent?
What should I target?

Thank you in advanced.
Will

Your code so far

<!-- file: index.html -->
<DOCTYPE html>
<html lan="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Build a Tribute Page">
    <link rel="stylesheet href="styles.css">
    </head>
<main id="main"> 
<title id="title">Dr. Norman Borlaug </title>
<h1>Dr. Norman Borlaug</h1>
  <p>The man who saved a billion lives</p>
<div id="img-div">
  <img id="image" src="https://images.pexels.com/photos/5256400/pexels-photo-5256400.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
  <figcaption id="img-caption">Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
   </div>
   <h2 id="tribute-info">What should I type</h2>
   <p>If you have time, you should read more about this incredible human being on his <a href="wikipedia.com" id="tribute-link" target="_blank">Wikipedia</a> entry.</p>
</main>

<!--X Test error
Your img element should have a display of block 
Your #image should have a max-width of 100%
Failed:Your #image should be centered within its parent -->

/* file: styles.css */
#img-div {
display: flex;
}

img {
  display: block
}

#image {
max-width: 100%;
height: auto;
}

#img-caption {

}
#tribute-link {

}

#tribute-info {
  
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Welcome to our community!

Delete the following CSS code:
#img-div and #image.

Add to the img selector:

  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;

Try the test again.

3

Thank for reply.
I tried your advice but it dosen’t work.
Still get the same error.

What’s wrong with my code?

4

try putting the “display: block” in the “#image” instead of the “img”
if that doesn’t work then try putting a semicolon after the “display: block”

/* file: styles.css */
#img-div {
display: flex;
}

img {
}

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

#img-caption {

}
#tribute-link {

}

#tribute-info {
  
}
1 Like
5

I finally find out what’s wrong in my code.

In the html, I miss a " in the link element.

-><link rel=“stylesheet**”** href=“styles.css”>