Boa tarde!
Todos os quadros ficaram alinhados e no tamanho correto, somente o do G1 ficou menor que os demais. Ele está alinhado, mas com o quadro menor. Não consigo achar o erro
Segue o código HTML e CSS
<ul class="portfolio">
<li>
<a href="http://www.bmw.com">
<figure class="quadro-bmw">
<img class="bmw" src="bmw.png" alt="Site da BMW">
<figcaption>BMW.com: Reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://www.uol.com.br">
<figure class="quadro-uol">
<img class="uol" src="uol.png" alt="Site da uol">
<figcaption>UOL.com.br: Reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://www.ibm.com">
<figure class="quadro-ibm">
<img class="ibm" src="ibm.png" alt="Site da ibm">
<figcaption>IBM.com:Aplicação de progressive enhancement em conjunto com aplicação Back-End</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://g1.globo.com">
<figure class="quadro-g1">
<img class="g1" src="g1.png" alt="Site do g1">
<figcaption>G1.com.br:Reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</li>
</ul>
.portfolio li {
display: inline-block;
border:solid 8px #000;
background-color: #FAFFFC;
padding:16px;
margin-bottom: 16px;
margin-right: 16px;
width: 45%;
box-sizing: border-box;
}
.portfolio img {
width: 100%;
}