Primer ejercicio practico del curso

Buen dia querida comunidad.
Solicito ayuda, necesito hacer que una imagen sea responsiva cambiando su ancho en relacion a un elemento padre (div)

<!DOCTYPE html>
  <main id="main">
      <h1 id="title">Dr. Norman Borlaug</h1>
      <div id="img-div">
        <img id="image" alt="Dr. working with people in a mexican field" src="">
          <figcaption id="img-caption">Here we can see Dr. Norman Borlaug working in a mexican field</figcaption>
... ... ...
  font-size: 10px;

  font-size: 1.5rem;
  line-height: 1.6;
  text-align: center;
  color: #000;
  margin: 0;

  font-size: 4rem;
  margin-bottom: 0;  

@media (max-width: 540px){
  width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;

  text-align: left;
  margin-left: 15rem;
  margin-right: 15rem;

  font-size: 15px;
  font-style: italic;
  margin: 40px;
  text-align: center;

Información de tu navegador:

El agente de usuario es: Navegador Brave, windows 64

Desafío: Construye una página tributo

Enlaza al desafío:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

The image styles can’t only apply to the media query.

Although I’m guessing if you did run the test when the media query applies it would pass.