hola porque en este
.cabecera{
align-items: center;
background-color: #f9f9f9;
display: flex; /colocar los elementos uno al lado de otro/
justify-content: space-between;
padding-left: 2rem; /despeque de los bordes/
padding-right: 2rem;
}
.menu__lista{
display: flex; /para que se posicionen uno al lado de otro/
}
.menu__item{
list-style: none;
}
.menu__link--activo{
color: #333333;
font-weight: bold;
margin-right: 1.25rem;
text-decoration: none;
}
.menu__link{
color: #808080;
margin-right: 1.25rem;
text-decoration: none;
}
.menu__link:hover{
text-decoration: underline;
}
.banner{
position: relative;
/El banner se convierte en el “punto de referencia” para posicionar cosas dentro de él./
/es un punto de referencia no quiere decir que el elemento este encerrado dentro del contenedor/
}
.banner__imagen{
width: 100%;
height: calc(100vh - 72px);
}
.banner__titulo{
color: #fdfdfd;
font-family: Pacifico, cursive;
font-size: 5.0625rem;
text-align: center;
left: 50%; /*lo posiciona hacia la derecha*/
top: 50%; /*lo posiciona hacia abajo*/
transform: translate(-50%, -50%);
position: absolute;
text-shadow: 0 4px 4px rgba(0,0,0,0.75);
width: 100%; /*el elemento ocupre todo el ancho del contenedor*/
}
.sobre{
padding: 2.5rem; /*agregar espacio para el texto, crear un espacio interno entre el borde del contenedor y su contenido*/
text-align: center;
}
.sobre__titulo{
color: #DA2B1F;
font-family: Pacifico, cursive;
font-size: 3.18775rem;
}
.sobre__descripcion{
color: #8c8888;
font-size: 1.75rem;
font-weight: 100;
}
porque el top hace subir si se supone que hace bajar osea cuando es left coloca hacia la derecha pero top igual sube el titulo en la pagina de recetas
