Build a Tribute Page - Your #image should be centered within its parent

I have been stuck on this last task in the Tribute Page building process for about 6 cumulative hours. I have tried googling and searching on here, but to no avail. I’m hoping someone can help me resolve my issue. Thank you very much.

I hope my code is formatted correctly.

<div id="img-div">
        <img id="image" src="https://guardianlv.com/wp-content/uploads/2014/10/Jonas-Salk-100th-B-Day-1.jpg" alt="Jonas Salk in laboratory">
        <figcaption id="img-caption">Jonas Salk in a laboratory holding a rack of test tubes</figcaption>
        </div>
#img-div {
  width: 100%;
  height: auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: solid 25px grey;
  border-radius: 25px;

can you clarify what you mean by “last task”?

I’m sorry!

Your #image should be centered within its parent.

I can’t seem to center my #image in my parent div element to finish this project.

is your code available on codepen?

or can you provide a link to the FCC exercise you are on as well as the full code (not just a snippet)?

No codepen yet, but I can provide the necessary information.

https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jonas Salk</title>
    <link rel="stylesheet" href="styles.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
  </head>
  <body>
    <main id="main">
      <h1 id="title">Jonas Salk</h1>
      <p>The man responsible for one of the first successful polio vaccines</p>
      <div id="img-div">
        <img id="image" src="https://guardianlv.com/wp-content/uploads/2014/10/Jonas-Salk-100th-B-Day-1.jpg" alt="Jonas Salk in laboratory">
        <figcaption id="img-caption">Jonas Salk in a laboratory holding a rack of test tubes</figcaption>
        </div>
         <h2>Here's a simplified timeline of Mr. Salk's life</h2>
        <ul id="tribute-info">
          <li><b>1914</b> - Jonas Salk was born October 28th in New York City</li>
          <li><b>1934</b> - Earned a bachelors degree in chemistry from the CCNY </li>
          <li><b>1939</b> - Graduated from NYU medical school</li>
          <li><b>1947</b> - Became the head of virology at the University of Pittsburgh</li>
          <li><b>1952</b> - After years of painstaking research, Salk made a breakthrough on a polio vaccine</li>
          <li><b>1955</b> - Salk's polio vaccine became available across the whole United States</li>
          <li><b>1963</b> - Helped in establishing 'The Institute of Biological Sciences' in San Diego, CA, later named the 'Salk Institute'</li>
          <li><b>1995</b> - Died of cardiac arrest on June 23rd in La Jolla, CA</li>
        </ul>
        <p>To learn more about Jonas Salk's life and achievements please feel free to check out his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Jonas_Salk" target="_blank">Wikipedia</a> page!</p> 


    </main>
  </body>
</html>
* {
  font-family: courier;
}

h1 {
  text-align: center;
  font-size: 2.5rem;
}

h2 {
  text-align: center;
  font-size: 2rem;
}

p {
  text-align: center;
  font-size: 1em;
}

#img-div {
  width: 100%;
  height: auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: solid 25px grey;
  border-radius: 25px;
}

#img-caption {
  text-align: center;
  font-size: 0.90rem;
  font-weight: bold;
  padding-top: 10px;
}

#tribute-info {
  font-size: 1.1rem;
  padding: 10px;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

li {
  padding: 3px;
}

a {
  color: blue;
}


it seems your border is throwing off the centering.
(having the 25px border is making the image get too big.)
one option is to remove the border. (I check this and it passes the test without the border definition)

I am not sure right now how to compensate for the border in a way that the test will accept…

1 Like

Thank you for your help!!