Img element display set to block

Hey, Iā€™m just tying to tick all the boxes for this challenge before I reformat stuff but its not passing the test that says the display for the img element should be set to block. I know that the #image is already set to flex but idk how to appease both rules. Thanks :slight_smile:

/* file: index.html */
<!DOCTYPE html>
  <title id="title">Jacob Collier</title>
  <link rel="stylesheet" href="styles.css">
<main id="main">
  <div id="img-div">
    <img id="image" src="">
    <figcaption id="img-caption">picture of jacob collier</figcaption>
    <p id="tribute-info">info about Jacob Collier</p>
    <p><a href="" id="tribute-link" target="_blank">more info</a></p>
/* file: styles.css */
#image {
height: auto;
display: flex;

img {
display: block;
  **Your browser information:**

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

Challenge: Build a Tribute Page

Link to the challenge:

Since class selector (#image) has higher specificity than the type selector (img), display:flex takes precedence over display:block in your code when it comes to styling the image. To pass the check, simply remove the display:flex property from #image.

If the reason why you are using flexbox is to centralize the image, you can achieve that by adding the property margin:0 auto as well without using flexbox.