Build a Tribute Page - Help with IMG centering

HTML-CSS
1

Tell us what’s happening:

I keep failing the last test regarding the image being centered in it’s element. It says the image isn’t centered despite it appearing centered. I believe I’m also using the correct alignment CSS but maybe it’s not in the right spot? I’m not sure. Any help would be greatly appreciated.

Your code so far

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
<style>
  .main-grid {
    display: grid;
    grid-template-areas:
      "top"
      "middle"
      "bottom";
    justify-items: center;
  }
  .header {
    grid-area: top;
  }
  .image-container {
    grid-area: middle;
  }
  .content {
    grid-area: bottom;
  }
  #main {
    background-color: gray;
  }
  #header-section {
    text-align: center;
  }
  header {
    font-size:  42px;
  }
  img {
    max-width: 100%;
    display: block;
  }
  #image {
    justify-content: center;
    align-items: center;
  }
</style>
<main id="main" class="main-grid">
  <div id="header-section">
    <header id="title" class="header">Tribute to Ron Swanson </header>
    <header-caption> Former Director of the Pawnee City Department of Parks and Recreation, and current owner of Very Good Building and Development Company </header-caption>
  </div>
 <figure id="img-div" class="image-container">
    <img id="image" class="image" src="https://upload.wikimedia.org/wikipedia/en/a/ae/RonSwanson.jpg"  alt="This is a pic of Ron Swanson">
 <figcaption id="img-caption" text-align: center;>Ron Swanson, the man, the myth, the legend.</figcaption>
  </figure>
  <div id="tribute-info" class="content">
  <p> 
    <ul>
      <li><strong>Family</strong> - Tamara "Tammy Zero" Swanson (mother)
      <li><strong>Spouse</strong> -
        <ul>
          <li>Tammy "Tammy One" Swanson (divorced)
          <li>Tammy "Tammy Two" Swanson (divorced twice)
          <li>Diane Lewis
        </ul>
      <li><strong>Children</strong> - 
        <ul>
          <li>John Swanson (son)
          <li>Zoey Lewis (step-daughter)
          <li>Ivy Lewis (step-daughter)
        </ul>
      <li><strong>Relatives</strong> -
        <ul>
          <li>Don Swanson (brother)
          <li>Lon Swanson (uncle)
          <li>Lon Swanson (brother)
          <li>Vaughn Swanson (brother)
          <li>Tamara Swanson (mother)
        </ul>
       <li><strong>Nationality</strong> - American
        </ul>
    <br>
    <a id="tribute-link" href="https://en.wikipedia.org/wiki/Ron_Swanson" target="_blank";>Get more information on this hero on Wikipedia!</a>
    </p>
  </div>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-tribute-page/

2

Add width: 100%; to the image.

img {
  width: 100%;
  max-width: 100%;
  display: block;
}
1 Like
3

I appreciate it! Yes this fixed the issue. I also noticed that adding margin: 0 auto; to my image element worked as well.

Thanks again!