Olá, galera! Eu pensei no código de uma forma diferente da resolução. Sei que o importante é alcançar o resultado desejado, e é por isso que decidi postar a forma como fiz caso alguém tenha interesse em ter uma visão alternativa. No meu HTML, coloquei o seguinte código:
<figure class="portfolio-box bmw">
<img src="images/bmw.png" alt="Imagem do site da BMW.com" class="img-portfolio-box">
<figcaption>
<a href="http://bmw.com">BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</a>
</figcaption>
</figure>
<figure class="portfolio-box uol">
<img src="images/uol.png" alt="Imagem do site da UOL.com.br" class="img-portfolio-box">
<figcaption>
<a href="http://uol.com.br">UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</a>
</figcaption>
</figure>
<figure class="portfolio-box ibm">
<img src="images/ibm.png" alt="Imagem do site da IBM.com" class="img-portfolio-box">
<figcaption>
<a href="https://www.ibm.com/br-pt">IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</a>
</figcaption>
</figure>
<figure class="portfolio-box g1">
<img src="images/g1.png" alt="Imagem do site do G1.com" class="img-portfolio-box">
<figcaption>
<a href="https://g1.globo.com">G1.com.br: aplicação de progressive enhancement em conjunto com aplicação back-end</a>
</figcaption>
</figure>
No caso, declarei a class portfolio-box e depois uma class para cada elemento. No CSS, utilizei o seguinte código:
.portfolio-box {
width: 45%;
box-sizing: border-box;
border: 8px solid black;
text-align: center;
margin: 16px;
padding: 16px;
}
.img-portfolio-box {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.bmw {
float: left;
}
.uol {
float: left;
}
.ibm {
float: left;
clear: left;
}
.g1 {
float: left;
margin-bottom: 100px;
}
No caso do G1, eu adicionei um margin-bottom de 100px porque o footer estava em cima (mesmo problema demonstrado nas aulas).
Enfim, espero que ajude alguém :-)