Posicinamento de elementos dentro de um tag class

Front-end HTML
#1

Existem duas tags que agrupam imagens de uma loja de roupas uma fica posicionada a esquerda e outra a direita. Eu preciso que a largura de cada seja 3 itens/imagens na horizontal,porém meu código fica na largura máxima de 2 elementos na horizontal. Gostaria de que alguém verificasse o que estou deixando de declarar.

Segue o HTML:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Novidades</title>
    <link rel="stylesheet" href="css/panel.css">
</head>
<div class="container paineis">
    <!--os paineis de novidades entrarão aqui dentro-->
    <section class="painel novidades">
        <h2>Novidades</h2>
        <ol>
            <!--primeiro produto-->
            <li>
                <a href="#"><!--produto.html-->
                    <figure>
                        <img src="img/produtos/miniatura1.png" alt="miniatura1">
                        <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                    </figure>
                </a>
            </li>
            <!--fim do primeiro produto-->

            <!--segundo produto-->
            <li>
                <a href="#">
                    <figure>
                        <img src="img/produtos/miniatura15.png" alt="miniatura15">
                        <figcaption>Vestido Azul por R$ 199,00</figcaption>
                    </figure>
                </a>
            </li>
            <!--fim do segundo pro-->

            <!--terceiro produto-->
            <li>
                <a href="#">
                    <figure>
                        <img src="img/produtos/miniatura14.png" alt="miniatura14">
                        <figcaption>Blusa Azul por R$ 89,90 </figcaption>
                    </figure>
                </a>                    
            </li>
            <!--fim do terceiro pro-->

            <!--quarto produto-->
            <li>
                <a href="#">
                    <figure>
                        <img src="img/produtos/miniatura13.png" alt="miniatura13">
                        <figcaption>Blusa Rosa por R$ 79,90</figcaption>
                    </figure>
                </a>
            </li>
            <!--fim do quarto pro-->

            <!--quinto produto-->
            <li>
                <a href="#">
                    <figure>
                        <img src="img/produtos/miniatura12.png" alt="miniatura12">
                        <figcaption>Blusa Simples por R$ 59,90</figcaption>
                    </figure>
                </a>
            </li>
            <!--fim do quinto pro-->

            <!--Sexto produto-->
            <li>
                <a href="#">
                    <figure>
                        <img src="img/produtos/miniatura11.png" alt="miniatura11">
                        <figcaption>AAAA por R$ 99,99</figcaption>
                    </figure>
                </a>                    
            </li>
            <!--fim do sexto pro-->

            <!--coloque mais produtos aqui!-->
        </ol>
    </section>
    <section class="painel mais-vendidos">
        <h2>Mais vendidos</h2>
        <ol>
            <li>
                <a href="#">
                    <figure>
                        <img src="img/produtos/miniatura15.png" alt="miniatura15">
                        <figcaption>Vestido Azul por R$ 199,00</figcaption>
                    </figure>
                </a>                    
            </li>
            <li>
                <a href="#">
                    <figure>
                        <img src="img/produtos/miniatura13.png" alt="miniatura13">
                        <figcaption>Blusa Rosa por R$ 79,90</figcaption>
                    </figure>
                </a>                    
            </li>
            <li>
                <a href="#">
                    <figure>
                        <img src="img/produtos/miniatura12.png" alt="miniatura12">
                        <figcaption>Blusa Simples por R$ 59,90</figcaption>
                    </figure>
                </a>                    
            </li>
        </ol>

    </section>
</div>
<!--fim .container .paineis-->

Segue o CSS:

    .painel {
    margin: 10px 0;
    padding: 10px;
    width: 445px;
}

.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;
    float: left;
}

.mais-vendidos{
    background-color: #dcdcf5;
    float: right;
}

Alguma dica do que tenho que fazer??

Desde já agradeço :v:

#2

O codigo html não saiu inteiro mas espero que tenham compreendido:
So em resumo preciso que a pagina saia assim:
zas