How to redo this layout?

Question

I’m studying for a booklet from Caelum and we have to redo this site of Mirror Fashion. But I did everything as recommended, I even copied the code, but I can’t do this part:

When I try it comes out all broken up like the next:

Html code

<div class="conteiner paineis">
<section class="painel novidades">
    <h2>Novidades</h2>
    <ol>
        <li>
            <a href="img/produtos/foto1-rosa.png">
            <figure>
                <img src="img/produtos/foto1-rosa.png" alt="Camisa feminia com flores rosas 129,00 reais.">
                <figcaption>129,00 reais.</figcaption>
            </figure>
        </a>
        </li>
        <li>
            <a href="img/produtos/miniatura9.png">
            <figure>
                <img src="img/produtos/miniatura9.png" alt="Conjunto de camisa quadriculada e short curto 60,00 reais.">
                <figcaption>60,00 reais.</figcaption>
            </figure>
        </a>
        </li>
        <li>
            <a href="img/produtos/miniatura6.png">
            <figure>
                <img src="img/produtos/miniatura6.png" alt="Vestido rosa 70,89">
                <figcaption>70,89 reais.</figcaption>
            </figure>
        </a>
        </li>
        <li>
            <a href="img/produtos/foto15-rosa.png">
            <figure>
                <img src="img/produtos/foto15-rosa.png" alt="Vestido para adolescente 126,78 reais">
                <figcaption>126,78 reais.</figcaption>
            </figure>
        </li>
        <li>
            <a href="img/produtos/foto4-azul.png">
                <figure>
                    <img src="img/produtos/foto4-azul.png">
                </figure>
                <figcaption>267 reais.</figcaption>
            </a></li>
            <li><a href="img/produtos/miniatura3.png">
                <img src="img/produtos/miniatura3.png" alt="Casaco fino de cor verde 23,00 reais.">
                <figcaption>23,00 reais.</figcaption>
            </a></li>

        </li>
    </ol>
</section>
<section class="painel mais-vendidos">
    <h2>Mais Vendidos</h2>
    <ol>
        <li>
            <a href="img/produtos/foto5-azul.png">
            <figure>
                <img src="img/produtos/foto5-azul.png" alt="Ginástica 15,00 reais.">
                <figcaption>15,00 reais.</figcaption>
            </figure>
        </a>
        </li>
        <li>
            <a href="img/produtos/foto9-verde.png">
            <figure>
                <img src="img/produtos/foto9-verde.png" alt="Casaco quadriculado verde 67,80 reais.">
                <figcaption>67,80 reais.</figcaption>
            </figure>
        </a>
        </li>
        <li>
            <a href="img/produtos/foto11-azul.png">
            <figure>
                <img src="img/produtos/foto11-azul.png" alt="Short confortável para casa 9,50.">
                <figcaption>9,50 reais.</figcaption>
            </figure>
        </a>
        </li>
        <li>
            <a href="img/produtos/foto12-verde.png">
            <figure>
                <img src="img/produtos/foto12-verde.png" alt="Camisa de seda muito confortável por apenas 22,90 reais.">
                <figcaption>22,90 reais</figcaption>
            </figure>
        </li>
        <li>
            <a href="img/produtos/miniatura10.png">
                <figure>
                    <img src="img/produtos/miniatura10.png" alt="Conjunto adolescente de camisa e calça jeans por apenas 350 reais.">
                    <figcaption>350 reais.</figcaption>
                </figure>
            </a></li>
            <li><a href="img/produtos/foto4-rosa.png">
                <img src="img/produtos/foto4-rosa.png" alt="Casaco feminino para muito frio 456,90 reais.">
                <figcaption>456,90 reais.</figcaption>
            </a></li>

        </li>
    </ol>
</section>

Css code

.painel{
    margin: 10px 0;
    padding: 10px;
    width: 445px;
}
.novidades{
    float: left;
}
.mais-vendidos{
    float: right;

}
.painel li{
    display: inline-block;
    vertical-align: top;
    width: 140px;
    margin: 2px;
    padding-bottom: 10px;
}
.painel h2{
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.painel a{
    color: #333;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}
.novidades{
        background-color: #F5DCDC;
}

Answer 1

The use of float is considered outdated today. I recommend using the flex-box when your goal is to align items, as it is more accurate than the float.

<style>
    .allContent {
        display: flex;
        flex-flow: row nowrap;
        margin-left: 15%;
        width: 70%;

    }
    .left .right{
        display: flex;
        flex-flow: row wrap;
    }
    .left{
        background-color: lightcoral;
        width: 49%;
    }
    .right{
        background-color: lightblue;
        width: 49%;
    }
    figure img{
        width: 100%;
        height: 25%;
    }
    figure{
        display: inline-block;
        width: 30%;
        margin: 0 0;
        padding: 6px;
    }
    a{
        color: black;
        text-decoration: none;
    }
</style>

<div class="allContent">
    <div class="left">
        <p> NOVIDADES </p>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
                <a href="#">
                    <img src="exemple.png">
                    <figcaption> Exemplo 1 - R$ 25,00</figcaption>
                </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>

    </div>

    <div class="right">
        <p> MAIS VENDIDOS </p>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
                <a href="#">
                    <img src="exemple.png">
                    <figcaption> Exemplo 1 - R$ 25,00</figcaption>
                </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
        <figure>
            <a href="#">
                <img src="exemple.png">
                <figcaption> Exemplo 1 - R$ 25,00</figcaption>
            </a>
        </figure>
    </div>
</div>

In the example above, the display: flex property was used in the parent div, in addition to the use of flex-flow: nowrap Row, allowed to thus place the daughters div’s on each other’s side and centrally (margin-left: 15%). To align the images according to the example of the site cited, both div’s daughters have the display property: flex, to enable the use of wrap (line break), and, to have 3 images on each side of the other, the width of each figure was set to 30%. If you want responsiveness, I suggest using media queries or bootstrap.