Olá amigos!
Estou começando a estudar desenvolvimento Front-end e pretendo evoluir mais adiante!
Estou usando a apostila da Caelum para estudar tal assunto.
Mas estou enfrentando um probleminha bem simples mas não sei como prosseguir.
Na apostila pede para criar isso:
Logo após mais uma section para a seção “Mais Vendidos”, e obviamente o código tanto HTML e CSS são os mesmos só muda a segunda Class para mais-vendidos.
Faço isso, mas quando salvo e quando faço o debugg com o Visual Code a segunda section não fica em em blocos um do lado do outro, fica listado de cima pra baixo, já reli essa parte da apostila inúmeras vezes e não sei o que ta acontecendo!
Me ajudem please!
<section class="painel mais-vendidos">
<h2>Mais Vendidos</h2>
<ol>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura7.png" alt="miniatura7">
<figcaption>item 7 R$ 120,00</figcaption>
</figure>
</a>
</li>
<!--Fim primeiro produto-->
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura8.png" alt="miniatura8">
<figcaption> Blusa Azul por R$ 40.00</figcaption>
</figure>
</a>
</li>
<!--Fim segundo produto-->
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura9.png" alt="miniatura9">
<figcaption> Item 9 por R$ 40,00</figcaption>
</figure>
</a>
</li>
<li>
<!--Fim terceiro produto-->
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura10.png" alt="miniatura10">
<figcaption> Item 10 por R$ 500,00</figcaption>
</figure>
</a>
</li>
</li>
<li>
<!--Fim quarto produto-->
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura5.png" alt="miniatura11">
<figcaption> Item 11 por R$ 500,00</figcaption>
</figure>
</a>
</li>
</li>
<!--Fim quinto produto-->
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura6.png" alt="minuatura12">
<figcaption> Item 12 por R$ 500,00</figcaption>
</figure>
</a>
</li>
</ol>
</section>
<!--Fim sexto produto e seção-->
Codigo CSS
painel h2 {
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px }
.painel a {
color: #333333;
font-size: 14px;
text-align: center;
text-decoration: none;}
.painel {
margin: 10px 0;
padding: 10px;
width: 445px;}
painel li {
display: inline-block;
vertical-align: top;
width: 140px;
margin: 2px;
padding-bottom: 10px;}
.novidades {
float: left;
background-color: #F5DCDC;}
.mais-vendidos { float: right; background-color: #DCDCF5;}
Programa para desenvolvimento do código: Visual Code.
Nível: Estudante
OS: Windows 7
Desculpa a ma formatação do CSS.