Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Hi,
I’m stuck in those steps, please help me:

  1. Your img element should have a display of block.

  2. Your #image should have a max-width of 100%.

  3. Your #image should be centered within its parent.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="eng">
<head>
  <title>Tribute Page</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main id="main">
  <h1 id="title">......</h1>
  <div id="img-div">
  <img id="image"></img>
  <div id="img-caption">....</div>
  </div>
  <p id="tribute-info">.....</p>
  <a href="https://img.freepik.com/photos-gratuite/panthere-cameleon-essaie-se-camoufler-crayons-couleur_488145-439.jpg?semt=ais_hybrid&w=740" id="tribute-link" target="_blank"></a>
 </main>
</body>
</html>

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

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

Can you say which parts of your code you believe meet these requirements please?

3

Hi,
For that part:

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

4

and is your css being applied at all?

try to do something garish and really visible like making the text or the background hot pink, does it work? is it being applied?

5

I found my mistakes. Thanks for your help.