Fiz um código diferente, é válido?

Olá, fiz o código de maneira diferente. Gostaria de saber se tem algum problema semantico ou se o que eu fiz foi válido.

<main>
            <h1 class="main-title">Portfolio</h1>



            <div class="content">

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


                <figure class="box bmw">
                    <img src="img/bmw.png" alt="site BMW">

                    <figcaption>
                    <a href="http://www.bmw.com">BMW.com: Reformulação de design e implementação de HTML, CSS e JavaScript</a>
                    </figcaption>

                </figure>

                <figure class="box uol">

                    <img src="img/uol.png" alt="site UOL">

                    <figcaption>
                    <a href="http://www.uol.com.br">UOL.com.br: Reformulação de design e implementação de HTML, CSS e JavaScript</a>
                    </figcaption>

                </figure>

                <figure class="box ibm">

                    <img src="img/ibm.png" alt="site IBM">

                    <figcaption>
                    <a href="http://www.ibm.com">IBM.com: Reformulação de design e implementação de HTML, CSS e JavaScript</a>
                    </figcaption>

                </figure>

                <figure class="box g1">

                    <img src="img/g1.png" alt="site G1">

                    <figcaption>
                    <a href ="http://www.g1.com.br">G1.com.br: Reformulação de design e implementação de HTML, CSS e JavaScript</a>
                    </figcaption>

                </figure>

            </div>

        </main>

e meu CSS ficou da seguinte maneira:

.box {
    background-color: #FAFFFC;     
    margin-bottom: 20px;
    padding: 16px;
    width: 42%;
    border: 8px solid #000;
    font-size: 15px;
    font-family: sans-serif;
}

.bmw {
    float: left;
    clear: left;
}

.uol {
    float: right;
    clear: right;
}

.ibm {
    float: left;
    clear: left;
}

.g1 {
    float: right;
    clear: right;
}

.ibm, .g1 {
    margin-bottom: 80px;
}


.box img {
    width: 100%;
}

Fico no aguardo de uma avaliação. Obrigado!