How to override elements with css

I’m trying to CSS put a yellow square below an image, as shown in the picture below, but I can’t. Does anyone have any suggestions on how I can make this effect?

HTML:

<div class="photo-container">
     <picture class="photo-perfil">
           <img src="assets/photo-perfil.jpg" alt="photo">
     </picture>
</div>

CSS:

.photo-perfil {
    display: block;
    margin: 30px;
    border: 2px solid yellow;   
}

>Solution :

You could try doing:

.photo-perfil {
  display: inline-block;
  margin: 30px;
  border: 2px solid yellow;
}

img {
  margin-top: -20px;
  margin-left: -20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

May not be the best solution but it does the job.