Imagens desalinhadas, não sei o que fazer, estou pedido.

.container-portfolio{
    width: 782px;
    margin: auto;
}
.portifolio {
    border: solid 8px black;
    background-color: #FAFFFC;
    padding: 16px;
    margin: 16px;
    width: 311px;

}

.bmw{
    clear: right;
    position: absolute;
    left: 160px;
    display: inline-block;
}

.uol{
    float: right;
    position: absolute;
    top: 257px;
    right: 340px;

}

.ibm{
    clear: right;
    position: absolute;
    top: 580px;
    left: 160px;
}

.g1{
    float: right;
    position: absolute;
    top: 580px;
    right: 340px;

}

<main>
            <h1 class="titulo-principal">Portfolio</h1>
            <div class="container-portifolio">
                <p>Veja abaixo a lista dos meus projetos mais relevantes</p>
                <ul class="portfolio">
                    <li>
                        <a href="http://bmw.com">
                            <figure class="bmw">
                                <img src="../img/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="http://uol.com.br">
                            <figure class="uol">
                                <img src="../img/uol.png" alt="Front-page 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="http://www.ibm.com.br">
                            <figure class="ibm">
                                <img src="../img/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="http://g1.com.br">
                            <figure class="g1">
                                <img src="../img/g1.png" alt="Front-page do portal G1">
                                <figcaption>G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                            </figure>
                        </a>
                    </li>
                </ul>
            </div>
        </main>

Qual seria a melhor solução? Estou confuso!

.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; float: left; } .portifolio img { clear: right; position: relative; left: 0; display: inline-block; }