Build a Tribute Page - ERROR

HTML-CSS
1

Hi everyone!

I’ve created my Tribute Page in order to get my certification, but there is an error: Your #image should be centered within its parent.

If I fix this, another error occurs: Your img element should have a display of block .

Please, how can I fix these two errors? I am getting crazy about that.

2

We would need to see your HTML and CSS in order to help you.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

3 
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>The Beatles Tribute Page</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <main id="main">
    <h1 id="title">The Beatles</h1>

    <div id="img-div">
      <figure>
        <a href="https://townsquare.media/site/295/files/2015/12/The-Beatles1.jpg?w=980&q=75" target="_blank">
          <img id="image" src="https://townsquare.media/site/295/files/2015/12/The-Beatles1.jpg?w=980&q=75" alt="The Beatles">
        </a>
        <figcaption id="img-caption">The Beatles: Paul McCartney, Ringo Starr, John Lennon and George Harrison performing</figcaption>
      </figure>
    </div>

    <div id="tribute-info">
      <p>The Beatles were an English rock band formed in Liverpool in 1960. With a lineup comprising John Lennon, Paul
        McCartney, George Harrison, and Ringo Starr, they are regarded as one of the most influential bands of all time.
        They were integral to the development of the 1960s counterculture and popular music's recognition as an art form.
      </p>
      <p>The Beatles' music became synonymous with the decade's social upheaval, and their popularity spread worldwide.
        They are often cited as the greatest and most commercially successful band in the history of popular music.
      </p>
    </div>

    <a id="tribute-link" href="https://en.wikipedia.org/wiki/The_Beatles" target="_blank">Learn more about The Beatles</a>

    <p id="credit">Made by Brenda Azeredo, a big fan</p>
  </main>
</body>

</html>
4 
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #F6F6F6;
}

#main {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#title {
  text-align: center;
  margin-top: 0;
  font-size: 32px;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

#img-div {
  margin-top: 20px;
  text-align: center;
  }

#image {
 justify-content: center;
  align-items: center;
  display: block;
  max-width: 100%;
  height: auto;
  border: 5px solid #333;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
}

#img-caption {
  margin-top: 10px;
  font-style: italic;
  text-align: center;
  color: #666;
}

#tribute-info {
  margin-top: 20px;
  color: #333;
  line-height: 1.5;
}

#tribute-link {
  display: block;
  text-align: center;
  margin: 20px auto;
  color: #FFFFFF;
  background-color: #333;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

#credit {
  font-style: italic;
  text-align: center;
  display: block; 
  margin: 0 auto;
}
div {
  text-align: justify;
}
p {
  text-align: justify;
}
5

I’ve just pasted here.

6

Hmm, I just copied your code into the editors and clicked the Run the Tests button and it passed for me.