Your img element should have a display of block / Your #image should have a max-width of 100%

Tell us what’s happening:
Hi, I need a little help to undrstand why. I am getting an “X” in this two.

  • Your img element should have a display of block.
    *Your #image should have a max-width of 100%"

Thanks

#img-caption {
  width: 400px;
}

#image
{
  max-width: 100%;
  height: auto;
  display:block;
   **Your code so far**
/* file: index.html */
<!DOCTYPE HTML>
<html>
<main id="main">
   
<style>
   body {
     background-color: black;
     color:white;
   }

   </style

 
   
   <div id="main">
     <h1 id="title"> Msc.Oscar Espinoza</h1>
     <div id="img-div">
       <a id="tribute-link" target="_blank" href="https://psicologiapractica.es/que-es-la-psicologia-social-definicion-y-areas/">
        <a id="tribute-link" target="_blank" href="https://psicologiapractica.es/que-es-la-psicologia-social-definicion-y-areas/">
        <img src="https://img.freepik.com/vector-gratis/concepto-conciencia-salud-mental_23-2148531011.jpg?t=st=1656270606~exp=1656271206~hmac=a1296cdea4cc89f49aa4a673481fe8f26122c8e80194e2edd69db77502a6a0b0&w=826"id="image" alt="awareness" width="100%" height="auto"></a>
       
       <figcaption id="img-caption"> servicios profesionales de Psicologia para personas de todas las edades.
         </figcaption>
         <p id="tribute-info">Nuestros servicios son los mejores del pais</p>

     </div>
     <h2>contenido</h2>
   </div>
   </main>
 </html>


/* file: styles.css */
#img-caption {
 width: 400px;
}

#image
{
 max-width: 100%;
 height: auto;
 display:block;
}
   **Your browser information:**

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

Challenge: Build a Tribute Page

Link to the challenge:

Hint: Your tag is a bit off here, you spelt it in full

So I should put only a part of the link?

<img src = "" >
not <image src = "">

oh, ok i am going to give it a try

No, it gives me the same error

Notice that you specified inline style on your image (the height and width), once its removed and the appropriate style applied to the image tag your project should pass those challenge.

In this test, please check the CSS file

I did but the changes does not happen on the html file. for example the tittle remains on the left. it does not move to the center. and the display: block and the max width does not happen either. No Idea why.

body {
  font-family: Arial;
}

h1 {
  text-align: center;
  font-size: 65px;
  text-transform: uppercase;

#image
{
  display:block;
  max-width: 100%;
  height: auto;
}

You don’t need to include css files. just need to copy the css file into the script. CMIIW

Check your href property of link element.

Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS. Put this one mate on the top of coding passage. so CSS working. Happy study Senpai.