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

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);
}

Vale vale vale. Ya entendí.

Puedes usar la propiedad

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

¡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.