div-naming-html-workshop.css

#banner{
  background-size: cover !important; /* `!important` se asegura de que esta regla se cumpla 100% de las veces */
  padding: 50px;
  background: linear-gradient(-225deg, rgba(0,101,168,0.6) 0%, rgba(0,36,61,0.6) 50%), url(images/banner-jch.png); /* esto es lo que le da el gradiente encima y le posiciona la imagen del banner */
  background-color: #1c2366;
}

#banner a{
  margin: 15px; /* ayuda a separar el link del resto del texto. al no pasarle una posición, pone 15px en top + bottom + left + right */ 
}

.white-box{
  background-color: #cad7d940;
  box-shadow: 0px 2px 4px #80808057; /* sombra del recuadro */
  padding:30px;
  width: 75%;
  margin: 0 auto; /* centra al elemento en el medio de la página -> `0` margin top & bottom + `auto` (igual cantidad) margin left & right */
  margin-top: 50px;
  border-radius: 9px; /* hace que el recuadro se vea redondo en las esquinas  */
}

.white-box p {
  letter-spacing: .5px; /* espacio entre las letras */
  line-height: 25px; /* espacio entre líneas */
}

.social-media{
  text-align: center /* hace que el texto vaya en el centro del <div> */
}

.social-media li{
  padding-right: 10px;
}

a:hover{
  font-size: 20px;
  font-weight: bold;
  color: #1c2366; /* color del texto, no del background. */
}

.gif{
  width: 195px;
  height: 215px;
  margin:0 auto;
}

.box{
  border-radius: 9px;
  background-color: #eaedf3;
  box-shadow: 0px 4px 30px rgba(0,0,0,0.7); /* cuando vean `rgba` -> el último número (0.7 en este caso) es transparencia. [0 = transparent, 1 = 100% opaco] */
  padding:30px;
  margin: 10px;
}

.box-text{
  margin-top: 20px;
}

.box a{
  text-decoration: none /* para que el link no contenga la línea subrayandolo */
}

.highlight {
  background: #1c2366;
  color: #D0EA00;
  padding: 10px; /* da el look de que es un botón, a.k.a "un link" */
}

.highlight:hover{
  color: #D0EA00;
  font-weight: bold
}

.boxes{
  margin-bottom: 60px;
}

.my-img {
  width: 160px;
}

.footer{
  background-color: #1c2366;
  height: 100%;
  width: 100%;
  padding: 20px;
  color: #fff;
}

.footer a{
  color: #D0EA00;
  text-decoration: none
}

.footer p{
  margin:0 /* <p> siempre manda margins a los lados que en el footer te puede causar comportamientos indeseados.. trata borrando esta línea y a ver que pasa */
}