Problema com as imagens

Olá, fiz o código do jeito que imaginei e as imagens da pagina não ficaram dentro da caixa como deveria, então fiz igual no exemplo do site, e isso também não arrumou, alguém sabe o que pode estar acontecendo?

Meu HTML:

<main>
        <h1 class="titulo">Portifólio</h1>
    <div class="texto">

        <p>Veja abaixo a lista dos meus projetos mais relevantes</p>

        <ul class="portifolio">
            <li>
                <a href="www.bmw.com">
                    <figure>
                        <img src="img/portifolio/bmw.png" alt="trabalho na bmw">
                        <figcaption>BMW.com: reformulação de design e implantação de HTML, CSS e JAvaScript</figcaption>
                    </figure>
                </a>
            </li>
            <li>
                <a href="www.uol.com.br">
                    <figure>
                        <img src="img/portifolio/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="ibm.com">
                    <figure>
                    <img src="img/portifolio/ibm.png" alt="IBM">
                    <figcaption>IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</figcaption>
                    </figure>
                </a>
            </li>
            <li>
                <a href="www.g1.com.br">
                    <figure>
                    <img src="img/portifolio/g1.png" alt="G1">
                    <figcaption>G1.com.br: reformulaçã de design e implementação de HTML., CSS e JAVAScript</figcaption>
                    </figure>
                </a>
            </li>
        </ul>



    </div>
    </main>

Meu CSS

.portifolio li {

    display: inline-block;
    border: 8px solid black;
    background-color: #FAFFFC;
    width: 45%;
    box-sizing: border-box;
    padding: 16px;
    margin-right: 16px;
    margin-bottom: 16px;

}
.portifolio ul {
    width: 100%;
}