Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
I’ve tried everything but it doesn’t work. I don’t know why anything is centered. Is still saying :

  • Your img element should have a display of block .
  • Your #image should have a max-width of 100% .
  • Your #image should be centered within its parent.
    Why??? Please, help me.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head><meta name="Tribute Page" content="tribute">
   <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="style.css"/>
 </head>
 <body>
   <main id="main">
<h1 id="title">Dr. Norman Borlaug</h1>
<p>The man who saved a billion lives</p>
<figure id="img-div">
<img id="image" src='https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg' width="800px" alt="Dr. Norma and some biologists">
<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.</ficaption>
</figure>
<br>
<section id="timeline">
<h2 id="tribute-info">Here's a time line of Dr. Borlaug's life:</h2>
<ul>
<li><span class="str">1914</span> - Born in Cresco, Iowa</li>
<li><span>1933</span> - Born in Cresco, Iowa</li>
<li><span>1935</span> - Born in Cresco, Iowa</li>
<li><span>1937</span> - Born in Cresco, Iowa</li>
<li><span>1941</span> - Born in Cresco, Iowa</li>
<li><span>1942</span> - Born in Cresco, Iowa</li>
<li><span>1944</span> - Born in Cresco, Iowa</li>
<li><span>1945</span> - Born in Cresco, Iowa</li>
<li><span>1953</span> - Born in Cresco, Iowa</li>
<li><span>1962</span> - Born in Cresco, Iowa</li>
<li><span>1970</span> - Born in Cresco, Iowa</li>
<li><span>1983</span> - Born in Cresco, Iowa</li>
<li><span>1984</span> - Born in Cresco, Iowa</li>
<li><span>2005</span> - Born in Cresco, Iowa</li>
<li><span>2009</span> - Born in Cresco, Iowa</li>
</ul>
<p>"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress."</p>
<cite>-- Indian Prime Minister Manmohan Singh</cite>
<h3><span>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank" id="tribute-link">Wikipedia entry</a></span></h3>
</section>
</main>
</body>
</html>

  


/* file: styles.css */
section {
padding:50px 300px 50px 300px; 
}
    

h1, p, h2, h3 {
text-align:center;
}

figcaption {
text-align: center;
}

img {
padding:50px 200px 10px; 
display:block;
position:relative;
text-align:center;
margin:0 auto;
}

body {
background-color: rgb(126, 123, 123);
margin:20px;
}

#image {
max-width:100%;
height:auto;
position:absolute;
display:inline-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/110.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2
  • your img selector has ‘padding’ property that makes different spaces around the element from left (50px) and right side (10px).
  • you don’t need the position properties in the ‘img’ and #image selectors.
  • margin:0 auto; put in the #image selector and delete from ‘img’ selector.
  • delete the display property from the #image selector.