Cómo mostrar el fondo de la etiqueta de sección para separarla de su banner

AQUÍ ESTÁ EL CÓDIGO – POR FAVOR VERIFIQUE

Diseño de muestra

Consectetur adipisicing elit

¡Lorem ipsum dolor se sienta amet, delectus consequatur, similique quia!


/*CUERPO*/

cuerpo{

font-family: “Raleway”, Arial, sans-serif;

color de fondo: # F5F5F5;

}

/*BANDERA*/

div.banner {

color: #ffffff;

/ * color de fondo: # E6E7E8; * /

background-image: url (“../ images / dark_tint.png”), url (“../ images / banner.jpg”);

tamaño de fondo: cubierta;

altura: 500 px;

}

/ * CONTENIDO DEL BANNER * /

section.banner-content {

pantalla: –webkit-flex;

pantalla: flex;

dirección flexible: columna;

alinear elementos: centro;

margen superior: 3%;

}

.banner-content h2, p, botón {

margen: 0px;

}

.banner-content h2 {

tamaño de fuente: 4em;

}

.banner-content p {

tamaño de fuente: 1.5em;

}

/*ENCABEZAMIENTO*/

encabezamiento{

pantalla: -webkit-flex;

pantalla: flex;

alinear elementos: centro;

justify-content: espacio intermedio;

acolchado: 30px;

}

encabezado nav {

margen: 0px;

relleno: 0px;

}

encabezado nav ul li {

color: # cdced0;

pantalla: bloque en línea;

relleno derecho: 50px;

}

/*PRIMERA SECCIÓN*/

sección. primera sección{

color de fondo: rojo;

}

section.first-content {

pantalla: -webkit-flex;

pantalla: flex;

dirección flexible: columna;

alinear elementos: centro;

}

/ * ICONOS-CONTENEDOR * /

div.icons-container {

/ * color de fondo: rojo; * /

pantalla: -webkit-flex;

pantalla: flex;

dirección flexible: fila;

justify-content: centro;

}

/ * ICONOS * /

div.circle {

margen: 10px;

}

div.first {

ancho: 100px;

altura: 100 px;

color de fondo: # 3CADD4;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

radio de borde: 50%;

}

div.second {

ancho: 100px;

altura: 100 px;

color de fondo: # ADD43C;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

radio de borde: 50%;

}

div.third {

ancho: 100px;

altura: 100 px;

color de fondo: # D43C61;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

radio de borde: 50%;

}

Si publica su código, será más fácil solucionarlo.

Parece que es posible que deba establecer una altura para el elemento de sección. Si no tiene una altura establecida, entonces no se mostrará y todo lo que verá es el área del banner. Establezca la altura de la sección en más grande que la pancarta y se mostrará alrededor (muy probablemente debajo) de la pancarta. Pero eso es sólo una conjetura. Publique su código y será mucho más fácil de resolver.

Editar: no vi el código que dijiste que publicarías. ¿Quizás es porque estoy en el móvil? Comprobaré nuevamente cuando llegue a mi computadora.

Editar # 2: su código original solo tiene una propiedad de color (que es solo para texto). Debe establecer un “color de fondo” para cada uno de los elementos, de lo contrario no funcionará. He adjuntado algunas imágenes que muestran cómo hacerlo, así como los resultados. Espero que ayude 🙂