Build a Tribute Page - Help with IMG centering

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=""></script>`
  .main-grid {
    display: grid;
    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;
<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>
 <figure id="img-div" class="image-container">
    <img id="image" class="image" src=""  alt="This is a pic of Ron Swanson">
 <figcaption id="img-caption" text-align: center;>Ron Swanson, the man, the myth, the legend.</figcaption>
  <div id="tribute-info" class="content">
      <li><strong>Family</strong> - Tamara "Tammy Zero" Swanson (mother)
      <li><strong>Spouse</strong> -
          <li>Tammy "Tammy One" Swanson (divorced)
          <li>Tammy "Tammy Two" Swanson (divorced twice)
          <li>Diane Lewis
      <li><strong>Children</strong> - 
          <li>John Swanson (son)
          <li>Zoey Lewis (step-daughter)
          <li>Ivy Lewis (step-daughter)
      <li><strong>Relatives</strong> -
          <li>Don Swanson (brother)
          <li>Lon Swanson (uncle)
          <li>Lon Swanson (brother)
          <li>Vaughn Swanson (brother)
          <li>Tamara Swanson (mother)
       <li><strong>Nationality</strong> - American
    <a id="tribute-link" href="" target="_blank";>Get more information on this hero on Wikipedia!</a>

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:

Add width: 100%; to the image.

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

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!