Primer ejercicio practico del curso

Español HTML-CSS
1

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>
<html>
  
  <main id="main">
    <header>
      <h1 id="title">Dr. Norman Borlaug</h1>
    </header>
    <body>
      <div id="img-div">
        <img id="image" alt="Dr. working with people in a mexican field" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg">
        <figure>
          <figcaption id="img-caption">Here we can see Dr. Norman Borlaug working in a mexican field</figcaption>
        </figure>
... ... ...
html{
  font-size: 10px;
}

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

h1{
  font-size: 4rem;
  margin-bottom: 0;  
}

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

ul{
  text-align: left;
  margin-left: 15rem;
  margin-right: 15rem;
}

#comment{
  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:

2

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

3

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.