Tengo un inconveniente con el box-shadow , no me encuadra el contenido, solamente aparece un rectángulo arriba: Dejo los códigos en code...

¡Hola! Bueno, por lo que pude ver sería lo siguiente: Primero, el elemento padre y el elemento hijo tienen la misma clase llamada .products y en CSS les estás asignando un max-height de 50px (en este caso a ambos elementos por tener la misma clase). Es por esto que al definir el box-shadow a .content no abarca todo el contenido que esperas porque el elemento padre tiene un alto de 50px. La solución sencilla sería simplemente quitar el max-height de .products para que el elemento tome el alto correspondiente al contenido que tiene. Espero te sirva, un saludo.

Vale vale vale. Ya entendí.

Puedes usar la propiedad

.products .content:hover {
  min-height: 180px;
}

Disculpa, no entiendo cuál es el error. Tu página es muy diferente a la del profesor. Si no te gusta el box shadow puedes jugar con los valores hasta encontrar uno que te guste. A mí por ejemplo me gusta mucho así:

.products .content {
  box-shadow: 0px 2px 5px rgba(0,0,0,.1);
}

.products .content:hover {
  box-shadow: 0px 2px 3px rgba(0,0,0,.2);
}