Tribute Page - Build a Tribute Page

Tell us what’s happening:

I’ve tried all sorts of variations to quell the error I am getting about img needs to display: block, but nothing is working

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Tribute Page" />
    <title id="title">Tribute Page</title>
    <link rel="stylesheet" href="styles.css" />
    <h1>Angelo Moriondo</h1>
  <main id="main">
    <div id="img-div">
      <img id="image" src="" alt="Angelo Moriondo">
      <figcaption id="img-caption">Angelo Moriondo, inventor of the espresso machine, patented the invention in 1884.</figcaption>
    <div class="tribute-all">
      <h2>A bit about Angelo</h2>
      <div id="tribute-info">
          <li>Born in June 1851 in Turin, Sardinia. He passed away in 1914 in Marentino.</li>
          <li>Being from a family of entrepreneurs, Angelo purchased  the Grand-Hotel Ligure in the city-centre Piazza Carlo Felice and the American Bar in the Galleria Nazionale of Via Roma.</li>
          <li>The real significance in his career came in 1884 however when he officially patented the first espresso machine as a way to make coffee faster.
          <li>While he continuously updated his invention between that time and his passing, he never took the espresso machine to industrial scale. With a mix of jealousy and marketing saavy, he insisted his machines be used as a way to get people to his establishments due to them being the only ones that used the system.
      <div class="tribute-link69">
        <p>To learn a bit more about this innovator of the coffee industry, <a id="tribute-link" href=",water%20to%20efficiently%20brew%20coffee." target="_blank">click here</a>

/* file: styles.css */
img {
  display: block;
  max-width: 100%;

#image {
  max-width: 100%;
  height: auto;
  display: flex;
  justify-content: center;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

1 Like

You made your image display block then you override it by making it display flex in the next rule, so you have to remove the display flex property.

1 Like

hi there!
you need to remove the display flex and justify content center form #iamge selector. and add margin top, bottom 0, and left , right auto. and set the height to auto within img selector.

Ahhh that makes sense. Thank you!

1 Like

Ah, makes sense. Thank you!