Não consigo colocar um elemento de <li> por linha

Bom dia/Boa tarde/Boa noite pessoal, blz?

Eu queria deixar uma caixa da tabela por linha, mas não sei nem qual o nome que devo pesquisar pra aprender isso. Acredito que a melhor forma de criar layout responsivo para a página de produtos seja colocando um

• por linha e centralizado, mas nem ideia de como fazer.

  Atualmente, o layout está dessa forma no mobile e gostaria de colocar a caixa cabelo em uma linha, a caixa barba em outra e assim por diante:

  Meu código CSS até então:

  body {
      font-family: 'Montserrat', sans-serif;
  }
  
  header {
      background: #BBBBBB;
      padding: 20px 0;
  }
  
  .caixa {
      position: relative;
      width: 940px;
      margin: 0 auto;
  }
  
  nav {
      position: absolute;
      top: 110px;
      right: 0;
  }
  
  nav li {
      display: inline;
      margin: 0 0 0 15px;
  }
  
  nav a {
      text-transform: uppercase;
      color: #000000;
      font-weight: bold;
      font-size: 22px;
      text-decoration: none;
  }
  
  nav a:hover {
      color: #C78C19;
      text-decoration: underline;
  }
  
  
  .produtos {
      width: 940px;
      margin: 0 auto;
      padding: 50px 0;
  }
  
  .produtos li {
      display: inline-block;
      text-align: center;
      width: 30%;
      vertical-align: top;
      margin: 0 1.5%;
      padding: 30px 20px;
      box-sizing: border-box;
      border: 2px solid #000000;
      border-radius: 10px;
  }
  
  .produtos li:hover {
      border-color: #C78C19;
  }
  
  .produtos li:active {
      border-color: #088C19;    
  }
  
  .produtos li:hover h2 {
      font-size: 34px;
  }
  
  .produtos h2 {
      font-size: 30px;
      font-weight: bold;
  }
  
  .produto-descricao {
      font-size: 18px;
  }
  
  .produto-preco {
      font-size: 22px;
      font-weight: bold;
      margin-top: 10px;
  }
  
  form {
      margin: 40px 0;
  }
  
  form label, form legend {
      display:block;
      font-size: 20px;
      margin: 0 0 10px;
  }
  
  .input-padrao {
      display: block;
      margin: 0 0 20px;
      padding: 10px 25px;
      width: 50%;
  }
  
  .checkbox {
      margin: 20px 0;
  }
  
  .enviar {
      width:40%;
      padding: 15px 0;
      background: orange;
      color: white;
      font-weight: bold;
      font-size: 18px;
      border: none;
      border-radius: 5px;
      transition: 1s all;
      cursor: pointer;
  }
  
  .enviar:hover {
      background: darkorange;
      transform: scale(1.2);
  }
  
  table {
      margin: 20px 0 40px;
  }
  
  thead {
      background: #555555;
      color: white;
      font-weight: bold;
  }
  
  td, th {
      border: 1px solid #000000;
      padding: 8px 15px;
  }
  
  
  /* css da página inicial */
  .banner {
      width:100%;
  }
  
  .titulo-principal {
      text-align: center;
      font-size: 2em;
      margin: 0 0 1em;
      clear: left;
  }
  
  
  
  .principal {
      padding:3em 0; 
      width: 940px;
      margin: 0 auto;
  }
  
  .principal p {
      margin: 0 0 1em;
  
  }
  
  .principal strong {
      font-weight: bold;
  }
  
  .principal em {
      font-style: italic;
  }
  
  .utensilios {
      width: 120px;
      float: left;
      margin: 0 20px 20px 0;
  }
  
  .mapa {
          padding: 3em 0;
          background: linear-gradient(#fefefe,#888);
          }
  
  .mapa p {
          margin: 0 0 2em;
          text-align: center;
      }
  
  .mapa-conteudo {
      width: 940px;
      margin: 0 auto;
  
  }
  
  .beneficios {
      padding:3em 0;
      background-color: #888888;
  }
  
  .itens{
      line-height: 1.5;
  
  }
  
  .itens:before {
      content: "★";
  }
  .itens:nth-child(2n){
      font-weight: bold;
  }
  
  .conteudo-beneficios {
      width: 640px;
      margin: 0 auto;
  }
  .imagem-beneficios {
      width: 60%;
      transition:400ms;
  
  }
  
  .imagem-beneficios:hover{
      opacity: 0.3;
  }
  
  .lista-beneficios {
      width:40%;
      display: inline-block;
      vertical-align: top;
  
  }
  
  
  .video {
      width: 560px;
      margin: 1em auto;
  }
  
  footer {
      text-align: center;
      background: url("bg.jpg");
      padding: 40px 0;
  }
  
  .copyright {
      color: #FFFFFF;
      font-size: 13px;
      margin: 20px 0 0;
  }
  
  @media screen and (max-width: 480px) { 
              .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video {
                  width: auto;
              }
              h1{
                  text-align: center;
              }
              nav{
                  position: static;
              }
              .lista-beneficios, .imagem-beneficios {
          width:100%;
              }
  
              .produtos {
                  width: auto;
  
              }
              .produtos li {
                  text-align: center;
              }
          }

  Agradeço demais a quem me ajudar, um abraço