Tribute Page - Build a Tribute Page

Tell us what’s happening:
I have this big empty space in the image figure. I have tried to center it but it didn’t work out. Do you know how to have it align in center and omit that big empty space?

Thank you

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">
        <link rel="stylesheet" href="styles.css">
        <title>Dr.Normal Borlaug</title>
    </head>
    <body>
        <main id="main">
            <header>
                <h1 id="title">Dr.Norman Borlaug</h1>
                <p>The man who saved a bilion lives</p>
                <figure id="img-div">
                    <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Dr_Norman">
                    <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>
                </figure>
                <section id="tribute-info">
                    <h3 id="headline">Here's time line of Dr.Borlaugh's life</h3>
                    <ul>
                        <li><b>1914</b> - Born in Cresco, Iowa</li></br>
                        <li><b>1933</b> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li></br>
                        <li><b>1935</b> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."</li></br>
                        <li><b>1937</b> - Finishes university and takes a job in the US Forestry Service</li></br>
                        <li><b>1938</b> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.</li></br>
                    </ul>
                    <blockquote cite="http://news.rediff.com/report/2009/sep/14/pm-pays-tribute-to-father-of-green-revolution-borlaug.htm">
                        <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."
                        <br /> 
                        <br/>
                        <i>-- Indian Prime Minister Manmohan Singh
                        </i></p>
                    </blockquote>
                <footer><b>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Norman_Borlaug">Wikipedia entry.</a></b></footer>
                </section>
             </main>  
        </body>
    
</html>
/* file: styles.css */
html {
  font-size:15px;
  display:block;
}
#image {
  max-width:100%;
  align:center;
}
img {
  display:block;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
body {
  line-height:1.5;
  text-align:center;
  margin:0;
}
main {
  background-color:#eee;
  margin:auto;
  padding:20px 10px;
}
h1 {
  font-size:2.5rem;
  line-height:1.2;
  margin-bottom:0;
}
p {
  display:block;
  margin:0px;
  margin-top:10px;
  margin-bottom:10px;
}
h1, p {
  text-align:center;
  font-family:arial;
}
#img-div {
  background-color:white;
  padding:10px;
  margin:0;
  
}
figcaption {
  margin:10px;
  font-family:arial;
}
section {
  font-family:arial;
font-size:1rem;
color:#333;
text-align:center;
}
h3 {
  margin:50px 0;
  display:block;
}
ul {
  text-align:left;
  margin:0 auto 50px auto;
  max-width:500px;
  padding:10px;
}
blockquote {
  font-style:italic;
text-align:left;
margin:0 auto 50px auto;
display:block;
}
cite {

}
h3 {
  font-size:20px;
  text-align:center;
}
a{
  color:#477ca7;
}

a:visited { 
  color:#74638f;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

I have this big empty space

Try adding margin: auto to the image

Also this:

Make sure you add a closing tag for it.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.