Help with exercice #9 of the Tribute page challenge

Tell us what’s happening:
I can’t find why my code doesn’t meet the last requirement (" 1. Your element should be centered within its parent element"),
I’ve tried to test it with the “Fork Me! FCC” codepen which said it passed 10/10 tests :frowning: I’ve spent the last few hours browsing the forum and trying each solution, it’s probably not so difficult, but I can’t find the right one, thanks for any help!

codepen : https://codepen.io/Lulululululululululululululu/pen/NWyOrXw
(please note english is not my main language and I’ve only had 3 days of learning yet)

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
</html>
<head>
  <link rel="stylesheet" href="styles.css" />
  <meta charset="UTF-8" />
</head>
<body>
  <main id="main">
    <h1 id="title">Oliver Sacks tribute</h1>
      <p>The man who wrote the way into our brains</p>
<div id="img-div">
<img id="image" src="https://mediaproxy.salon.com/width/1200/https://media.salon.com/2015/02/oliver_sacks.jpg" alt="author Oliver Sacks looking at the bottom left of the picture"/>
      <figcaption id="img-caption">Author and Neurologist</figcaption>
</div>
      <section id="tribute-info">
        <h3 id="timeline">Here's a timeline of Dr.Sacks' life : </h3>
        <ul>
          <li>1933 Born in London</li>
          <li>1951 Enter the University of Oxford</li>
          </ul>
        <div id="quote">
          <p><i>“If we wish to know about a man, we ask 'what is his story--his real, inmost story?'--for each of us is a biography, a story. Each of us is a singular narrative, which is constructed, continually, unconsciously, by, through, and in us--through our perceptions, our feelings, our thoughts, our actions; and, not least, our discourse, our spoken narrations. Biologically, physiologically, we are not so different from each other; historically, as narratives--we are each of us unique.”</i>
― Oliver Sacks, The Man Who Mistook His Wife for a Hat and Other Clinical Tales</p>
          </div>
        <h3>Find his lifelong Bibliography on his <a id="tribute-link" href="https://fr.wikipedia.org/wiki/Oliver_Sacks" target="_blank">Wikipedia Entry</a></h3>
      </section>
    </main>
    <footer></footer>
    </body>

/* file: styles.css */
#title{text-align:center;}
p{text-align:center;}
figcaption{text-align:center;background-color:white}
*{background-color:#f1f3f9;font-family:Tahoma}
#img-div{background-color:white;padding:10;margin:auto auto;width:100%;display:block;}
#image{margin:auto;height:auto;padding:10px;max-width:100%;background-color:white;display:block;}



  **Your browser information:**

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

Challenge: Build a Tribute Page

Link to the challenge:

Hi @ Lulululululululu and welcome to the forum!

The padding on your #image selector seems to be causing the test to fail.
But I’m guessing that you only added it because the padding on your #img-div selector didn’t have any effect.

In your CSS file, look at your #img-div selector.
The padding isn’t quite coded correctly (compare it to the padding on your #image selector).

So, I think you need to:

  • correct the padding on #img-div
  • then remove the padding on your #image selector

After that, I think your code should pass the tests.

1 Like

I can’t believe I’ve missed it, thank you so much!