Qual a lógica de usar as tags ul e li para envolver a tags figure e suas filhas? | HTML5 e CSS3 I: Suas primeiras páginas da Web

Abaixo o código da resolução do exercício:

<body>
        <main>
            <h1 class="titulo-principal">Portfolio</h1>
            <div class="container">
                <p>Veja abaixo a lista dos meus projetos mais relevantes</p>
                <ul class="portfolio">
                    <li>
                        <a href="http://bmw.com">
                            <figure>
                                <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>
                                <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>
                                <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>
                                <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>

E este outro é o meu:

<main>
            <h1 class="titulo-principal">Portfolio</h1>
            <div class="container">
                <p>Veja abaixo a lista dos meus projetos mais relevantes</p>
                <figure class="bmw">
                    <img src="img/bmw.png" alt="Front-Page do Site da BMW" class="portfolio">
                    <figcaption><a href="#">BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</a></figcaption>
                </figure>
                <figure class="ibm">
                    <img src="img/ibm.png" alt="Front-Page do Site da IBM" class="portfolio">
                    <figcaption><a href="#">IBM.com: aplicação de progressive enhancement em conjunto com aplicação BackEnd</a></figcaption>
                </figure>
                <figure class="uol">
                    <img src="img/uol.png" alt="Front-Page do Portal UOL" class="portfolio">
                    <figcaption><a href="#">Uol.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</a></figcaption>
                </figure>
                <figure class="g1">
                    <img src="img/g1.png" alt="Front-Page do Portal G1" class="portfolio">
                    <figcaption><a href="#">G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</a></figcaption>
                </figure>
            </div>
        </main>

Eu consegui um resultado muito semelhante (98%), mas não as tags de listas. Eu tinha pensando em usar divs para figure, mas depois achei que seria desnecessário.

Vejam o css da resolução e o logo em seguida. Como foi possível obter o resultado sem as propriedades float? Por que a largura está 100%? Seguem os códigos:

.portfolio 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;
}

.portfolio img {
    width: 100%;
}

O meu:

.portfolio 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;
}

.portfolio img {
    width: 100%;
}

Aguardo esclarecimentos.