Bugle margins in CSS

Question

I’m trying to put an edge on an image, but the result is that the margin extends across the horizontal of the page, as shown in the print.

The idea is that the margin is around the image and its legend...

In HTML:

<figure class = 'foto-legenda'>
    <img src = '_imagens/glass-quadro-homem-mulher.jpg'>
    <figcaption>
        <h3>Google Glass</h3>
        <p>Uma nova maneira de ver o mundo.</p>
    </figcaption>
</figure>

In the CSS:

figure.foto-legenda {
    border: 8px solid white;
    box-shadow: 1px 1px 4px black;
}

The teacher also instructed to include the following section in order to prevent the margin from "misaligning" the image by resizing the browser window:

figure.foto-legenda img {
    width: 100%;
    height: 100%;
}

In doing so, apparently the edge fits right, but the image becomes gigantic...

Q. S.: I already tried to remove the caption text, but the result was the same.

Answer 1

If I understand the question correctly, what was missing there was you declare a maximum size for the conteiner, that is, the place that the other elements will fit, which in this case is the tag figure. In the case of my example, the image I placed has the width (width) of 536px:

figure.foto-legenda {
  max-width: 536px;         /* seta o tamanho fixo */
  border: 8px solid white;
  box-shadow: 1px 1px 4px black;
}

figure.foto-legenda img {
  width: 100%;
  height: 100%;
}

<figure class="foto-legenda">
  <img src="https://i.picsum.photos/id/257/536/354.jpg?hmac=nm-DRQwYb7mx97h32hITnpzDptvXok_UJCT3CY-LxJY">
  <figcaption>
    <h3>Google Glass</h3>
    <p>Uma nova maneira de ver o mundo.</p>
  </figcaption>
</figure>