Fiquei contente que meu raciocínio funcionou e meu resultado ficou 100% idêntico à imagem do exercício,

http://caelum-online-public.s3.amazonaws.com/intro-html-css/portfolio.png,

, mas meu código ficou bem diferente da solução proposta pelo curso, bem mais simples. Gostaria de entender pq essa minha solução não está ideal por favor.

parte relevante do HTML:

        <main>
            <h1 class="titulo-principal">Portfólio</h1>

            <div class="container">

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

                <figure>
                    <a href="http://www.bmw.com"><img src="img/bmw.png" alt="Imagem do site da BMW"> 
                    <figcaption>BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption></a>
                </figure>    
                <figure>
                    <a href="http://www.uol.com.br"><img src="img/uol.png" alt="Imagem do site da uol"> 
                    <figcaption>UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption></a>
                </figure>    
                <figure>
                    <a href="http://www.ibm.com.br"><img src="img/ibm.png" alt="Imagem do site da ibm"> 
                    <figcaption>IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</figcaption></a>
                </figure>   
                <figure>
                    <a href="http://www.g1.com.br"><img src="img/g1.png" alt="Imagem do site do g1"> 
                    <figcaption>G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption></a>
                </figure>    
            </div>
        </main>

CSS:

figure {
    border: 8px solid black;
    background-color: #FAFFFC;
    padding: 16px;
    margin: 16px;
    width: 280px;
    float: left;
}

figure img {
    width: 260px;
}