Tribute Page - Build a Tribute Page

Tell us what’s happening:
I am having issues with getting my image to center within it’s parent. I’ve tried several things and I still can’t get it to pass this one test.
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 id="title">Poe's Tribute Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main id="main">
<h1>Edgar Allan Poe</h1>
<p class="caption">The man behind the tales of terror</p>
<div class="img-div">
</div>
 <figure id="img-div">
    <img id="image" src="https://cdn.britannica.com/52/76652-050-F4A6B093/Edgar-Allan-Poe.jpg" alt="Portrait of Edgar Allan Poe">
    <figcaption id="img-caption">
 <em> Portrait of the famous writer, Edgar Allan Poe.</em>
    </figcaption>
  </figure>
<div class="border"></div>
      <section id="tribute-info">
<h3>Poe's Early Life:</h3>
<ul>
  <li>Poe was born on January 19, 1809 in Boston, Massachusetts. </li>
  <li>He is the son of the struggling actors, Elizabeth Arnold Poe and David Poe Jr. </li>
  <li>After the death of his mother, Poe was raised by John Allan, who was presumably his grandfather.</li>
  <li>Attended the University of Virginia.</li>
  <li>Poe excelled at university despite his attendance and gambling problems.</li>
  <li>Married his younger cousin, Virginia Clemm, who was 13 at the time.  
</li>
  <li>Poe was also known for drinking and gambling a lot. Poe also experienced some trauma and important losses during his life. Especially, when he lost his mother when he was young having died from tuberculosis. He later lost his wife, Virginia Clemm, when she died at age 24 from tuberculosis.</li>
</ul>
<h3>Poe's Writing Career</h3>
<ul>
<li>Poe is most commonly known for writing horror stories. However, he didn’t only write horror stories. He also wrote poems and several detective and science fiction stories as well. He was called the father of detective stories.</li>
<li>Some of his most famous works include: 
</li>
<ul>
  <li>The Raven</li>
  <li>
    The Tall Tale Heart
  </li>
  <li>The Cask of Amontillado</li>
  <li>The Black Cat</li>
  <li>The Fall of the House of Usher</li>
  <li>The Masque of the Red Death</li>
</ul>
</ul>
<h3>The End of Poe’s Life and  Achievements
</h3>
<ul>
  <li>Poe eventually dies on October 7th, 1849. He was 40 years old when he died and his exact cause of death was unknown. However, it is believed that he ended up dying due to either his obsessive drinking or an heart failure.  </li>
  <li>In 1910, Poe received the Hall of Fame for Great Americans.  </li>
</ul>
</section>
<div class="border-end"></div>
 <h5>If you would like to learn more about Poe, please check out his 
<a id="tribute-link" href="https://www.britannica.com/biography/Edgar-Allan-Poe" target="_blank">Britannica entry</a>
      </h5>

    </main>
  </body>
/* file: styles.css */
@import url('https://fonts.googleapis.com/css2?family=Fasthand&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Special+Elite&display=swap');


body{
  background-color:#5a5a66;
}
h1{
font-family: 'Fasthand', cursive;
font-weight:1;
font-size: 2.8rem;
text-align:center;
padding-bottom:none;
margin-bottom:-19;
}
.caption{
  text-align: center;
  font-size:1.5rem;
  font-family: 'Comforter Brush', cursive;
color:#0A0A0B;
}
#image{
   max-width: 100%;
  display: block; align-items: center;
  height: auto;
  margin: 0 auto;
  border: solid;
  
}
#img-caption{
  padding:0.5rem;
  display: block;
  color:#0A0A0B;
}
h3{
font-family: 'Libre Baskerville', serif;
}
ul{
font-family: 'Libre Baskerville', serif;
font-size:13px;
}

.border{
  padding: 2.3rem;
  border-bottom: 3px dotted 
}
a{
  color: #141613;
}
.border-end{
  padding: 1rem;
  border-bottom: 3px dotted 
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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:

have you tried to right click the image and click on “Inspect” in a browser like Chrome or Firefox? This will show you the details of how your image is laid out.
(That’s basically what I will try now to help you…)

edit:
deleteme

Here’s what my browser shows me when I inspect the image.

You have a right side margin value that doesn’t match the left hand margin value on the img element.

So try to see where that margin may be coming from. (the developer tools from firefox can also help with that)

I’ve tried that and I still can’t figure out what I am doing wrong.
#image{
max-width: 100%;
display: block; align-items: center;
height: auto;
margin: 0 auto;
border: solid;

}

the issue is happening because of the “border: solid” line
this is an invalid css rule.
you can delete it and you will pass the test.

1 Like

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