Apostila Caelum - HTML: 4.9: Painéis Flutuantes

Escrevi todo o código porem as imagens não ficam como de veriam, estou parado neste tópico sem saber como resolver isto, alguém poderia me dar uma mãozinha?
Grato.

Veja se seu código está igual

Código no index.html

`<div class="container paineis">
        <!-- os paineis de novidades e mais vendidos 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">
                                <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                            </figure>
                        </a>
                    </li>
                
                    <li>
                        <a href="produto.html">
                            <figure>
                                <img src="img/produtos/miniatura12.png">
                                <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                            </figure>
                        </a>
                    </li>
                
                    <li>
                        <a href="produto.html">
                            <figure>
                                <img src="img/produtos/miniatura12.png">
                                <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                            </figure>
                        </a>
                    </li>
                    
                    <li>
                        <a href="produto.html">
                            <figure>
                                <img src="img/produtos/miniatura13.png">
                                <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                            </figure>
                        </a>
                    </li>
                    
                    <li>
                        <a href="produto.html">
                            <figure>
                                <img src="img/produtos/miniatura14.png">
                                <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                            </figure>
                        </a>
                    </li>
                    
                    <li>
                        <a href="produto.html">
                            <figure>
                                <img src="img/produtos/miniatura15.png">
                                <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                            </figure>
                        </a>
                    </li>
                
                <!-- coloque mais produtos aqui! -->
                </ol>
        </section>
              
        <section class="painel mais-vendidos">
            <h2>Mais Vendidos</h2>
            <ol> 
                <li>
                    <a href="produto.html">
                        <figure>
                            <img src="img/produtos/miniatura11.png">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                               
                <li>
                    <a href="produto.html">
                        <figure>
                            <img src="img/produtos/miniatura10.png">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                
                <li>
                    <a href="produto.html">
                        <figure>
                            <img src="img/produtos/miniatura1.png">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                                
                <li>
                    <a href="produto.html">
                        <figure>
                            <img src="img/produtos/miniatura4.png">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                           
                <li>
                    <a href="produto.html">
                        <figure>
                            <img src="img/produtos/miniatura5.png">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                
                <li>
                    <a href="produto.html">
                        <figure>
                            <img src="img/produtos/miniatura3.png">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>                
                <!-- coloque vários produtos aqui -->
                </ol>
        </section>      
        </div>     

Código no Estilos.css`

`.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;
}
.mais-vendidos {
background-color: #dcdcf5;


}

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

O meu código está igual e demostra o mesmo erro de Jodé Lima