Alinhar listas em bloco [inserindo produtos]. HTML5 CSS3 aula 33

Neste vídeo damos continuidade ao vídeo anterior, falando exclusivamente de como inserir os produtos dentro de sua loja online. Mais especificamente com blocos horizontais e produtos na horizontal e na vertical automaticamente (configurado via CSS e também via HTML).
Alguns "truques" são utilizados para que os produtos fiquem alinhados.

Código fonte HTML:

<div class="bloco canecas">
      <section class="canecas">
            <h2>Canecas</h2>
            <ol>
                  <li>
                        <a href="caneca01.html">
                              <figure>
                                    <img class="imagens" src="css/img/caneca/01.png">
                                    <figcaption>Coelho R$20,00</figcaption>
                              </figure>
                        </a>
                  </li>
                  <li>
                        <a href="caneca02.html">
                              <figure>
                                    <img class="imagens" src="css/img/caneca/02.png">
                                    <figcaption>Caneca R$20,00</figcaption>
                              </figure>
                        </a>
                  </li>
<div>
                  <li>
                        <a href="caneca03.html">
                              <figure>
                                    <img class="imagens" src="css/img/caneca/03.png">
                                    <figcaption>Caneca R$20,00</figcaption>
                              </figure>
                        </a>
                  </li>
                  <li>
                        <a href="caneca04.html">
                              <figure>
                                    <img class="imagens" src="css/img/caneca/04.png">
                                    <figcaption>Caneca R$20,00</figcaption>
                              </figure>
                        </a>
                  </li></div>
            </ol>
      </section>
</div>
<div class="bloco camisas">
      <section class="camisas">
            <h2>Camisas</h2>
            <ol>
                  <li>
                        <a href="camisa01.html">
                              <figure>
                              <img class="imagens" src="css/img/camisas/01.png">
                              <figcaption>Camisa R$30,00</figcaption>
                              </figure>
                        </a>
                  </li>
                  <li>
                        <a href="camisa02.html">
                              <figure>
                              <img class="imagens" src="css/img/camisas/02.png">
                              <figcaption>Camisa R$30,00</figcaption>
                              </figure>
                        </a>
                  </li>
<div>
                  <li>
                        <a href="camisa03.html">
                              <figure>
                              <img class="imagens" src="css/img/camisas/03.png">
                              <figcaption>Camisa R$30,00</figcaption>
                              </figure>
                        </a>
                  </li>
                  <li>
                        <a href="camisa04.html">
                              <figure>
                              <img class="imagens" src="css/img/camisas/04.png">
                              <figcaption>Camisa R$30,00</figcaption>
                              </figure>
                        </a>
                  </li>
</div>
            </ol>
      </section>

Código fonte CSS:

.bloco h2 {
      margin-bottom: 10px;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 20px;
}
.bloco a {
      color: #f0ffff;
      font-size: 14px;
      text-align: center;
      text-decoration: none;
}
.bloco li {
      display: inline-block;
      vertical-align: top;
      margin: 2px;
      padding: 10px 10px 5px 0px;
      background-color: #363036;
      border: 3px dashed #363636;
}
.bloco {
      padding: 5px;
      width: 420px;
}

Assista ao vídeo:

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.