The <img> element should be centered within its parent element

I’m trying to get this test to pass. I’m not sure what I am missing. Please help!


<script src=""></script>
  body {
    background-color: black;
    color: white;
    font-family: calibri;

<div id="main">
  <h1 id="title">Tiger Woods - Roar</h1> 
  <div id="img-div">
  <a id="tribute-link" target="_blank" href="">  
  <img id="image" src="" alt="Picture of Tiger" width="20%" height="20%">  
    <figcaption id="img-caption"> You get out of it what you put into it.  If you put in effort and log your time, You'll get the results. </figcaption>
  <p id="tribute-info">
    <b> Tiger's Attributes </b>
      <li>Short Term Memory</li>
      <li>Strong Mental Focus</li>
      <li>Creative Mind's Eye</li>


#img-caption {
  width: 400px;

#image {
  max-width: 100%;
  height: auto;
  display: block;

Hello and welcome to the freeCodeCamp community~!

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Hi there,
Welcome to the forum,
Is the the tribute page project? Can you post a link to your Codepen? It’s easier to see what’s going on that way.

1 Like

Thanks for your instruction on how to post my code. It’s my first project. Sorry for the late response. I did a little digging and was able to find out my problem. I needed to add a margin: 0 auto to the #image element.