No entiendo porque se me genera una imagen fantasma en el border-bottom
lo exagere a 10 px para que se note.
.head {
color: #FFFFFF;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
padding-top: .75rem;
padding-bottom: .75rem;
border-bottom: 10px solid #103D4A;
position: absolute;
}
Hola Luis, espero que estés bien.
La imagen fantasma que mencionas puede estar relacionada con la propiedad position: absolute que estás utilizando en el selector .head. La propiedad position: absolute permite posicionar un elemento de manera relativa a su contenedor más cercano que tenga una propiedad de posición establecida (en este caso, puede ser el contenedor principal de la página).
Cuando se utiliza position: absolute, es importante recordar que el elemento se quita del flujo normal de la página, lo que puede afectar la posición de otros elementos en la página. En particular, si el elemento posicionado absolutamente tiene un tamaño mayor al de su contenedor, puede ocurrir que el contenido del contenedor se superponga al elemento posicionado y se genere un "efecto fantasma".
En este caso, el border-bottom de .head tiene un tamaño de 10px, que se agrega al tamaño total del elemento .head. Si el contenedor principal de la página no tiene un tamaño suficiente para contener todo el contenido de .head más el border-bottom, es posible que el border-bottom se superponga al contenido siguiente en la página y cause un efecto fantasma.
Para evitar este problema, puedes intentar ajustar el tamaño de .head y/o del contenedor principal de la página para asegurarte de que haya suficiente espacio para el contenido y el border-bottom. También puedes probar con cambiar la propiedad position a relative o eliminarla por completo si no es necesaria para el diseño de la página.
Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.
¡Saludos!