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

HTML-CSS
1

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

HTML

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<style>
  body {
    background-color: black;
    color: white;
    font-family: calibri;
  }
</style>



<div id="main">
  <h1 id="title">Tiger Woods - Roar</h1> 
  
  <div id="img-div">
  
  <a id="tribute-link" target="_blank" href="https://youtu.be/lvFkYpJhMgg">  
  <img id="image" src="https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/5/2019/03/tiger-woods-things.jpg" alt="Picture of Tiger" width="20%" height="20%">  
  </a>
    
    <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>
    
</div>
  
  <p id="tribute-info">
    <b> Tiger's Attributes </b>
    <ul>
      <li>Confidence</li>
      <li>Short Term Memory</li>
      <li>Strong Mental Focus</li>
      <li>Creative Mind's Eye</li>
      <li>Competitive</li>
    </ul>
    
  </p>  
  
</div>

CSS

#img-caption {
  width: 400px;
}

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

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

3

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
4

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.