Estoy haciendo un header igual a este:
Mi problema es por qué al momento de ponerle un margin-botom a mi div "modulos" no respeta la maquetación.
Este es mi código:
<header>
<div class="plan_de_estudio">PLAN DE ESTUDIOS</div>
<div class="modulos">
<div class="descripcion">MÓDULOS DE LA CARRERA</div>
<div class="descripcion">Procesos topográcos</div>
<div class="descripcion">Movimiento de tierras en obras civiles</div>
<div class="descripcion">Procesos constructivos en edificaciones</div>
<div class="descripcion">Procesos constructivos en obras de infraestructura</div>
<div class="descripcion">Formación de base</div>
<div class="descripcion">Formación transversal</div>
</div>
</header>
y sus estilos:
header{
width: 100%;
height: 225px;
background: slategray;
display: flex;
justify-content: space-between;
}
.plan_de_estudio{
width: 400px;
height: 100%;
background: red;
margin-left: 150px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 35px;
font-family: arial;
font-weight: bold;
padding: 0 100px;
box-sizing: border-box;
text-align: center;
}
.modulos{
width: 1000px;
height: 225px;
background: white;
margin-bottom: 65px;
}
ESTE SERÍA MI CÓDIGO COMPLETO
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EDIFICACIONES Y OBRAS CIVILES</title>
</head>
<style>
/*CSSS GRID NO TIENE INCLUIDO LA PROPIEDAD BOX-SIZING*/
body {
padding: 0;
margin: 0;
box-sizing: border-box;
border-left: 35px solid red;
border-right: 35px solid red;
}
.contenedor {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 64px repeat(9, 128px); /*32px, 128px*/
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
width: 95%;
/*margin: 2rem auto;*/
margin-top: 2rem;
margin-bottom: 2rem;
margin-left: auto;
margin-right: auto;
}
.item {
background: #595957;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
color: white;
font-family: arial;
font-weight: bold;
text-align: center;
box-sizing: border-box;
}
.curso {
font-size: 15px;
font-weight: initial;
color: black;
border-bottom: 4px solid;
padding: 0 5px;
font-weight: 500;
}
.penultimo {
grid-row: 10/11;
grid-column: 4/span 1;
}
.ultimo {
grid-column: 5/span 1;
}
/*MORADOS*/
.item7, .item8, .item13, .item14, .item20{
background: #D1C4E9;
border-color: #ACA4C0;
}
/*NARANJAS*/
.item9, .item15, .item26 {
background: #F5D6C2;
border-color: #D4B69B;
}
/*VERDES*/
.item10, .item11, .item16, .item17, .item21, .item22, .item23, .item27, .item28, .item29, .item33, .item34, .item35, .item40, .item41, .item46, .item52, .penultimo{
background: #AAD7C3;
border-color: #8DC2A9;
}
/*AMARILLOS*/
.item12, .item18, .item24, .item30, .item36{
background: #F5E087;
border-color: #CDBC68;
}
/*ROJOS */
.item19, .item25, .item31, .item32, .item37, .item38, .item39, .item44, .item47{
background: #F0A6B9;
border-color: #CA7586;
}
/*CELESTES*/
.item42, .item43, .item45, .item48, .item49, .item50, .item51, .item53, .ultimo{
background: #B3E0F2;
border-color: #8ABAC9;
}
/*ITEMS CON BORDE ROJO*/
.item13, .item15, .item20, .item36, .item41, .penultimo{
border: 4px solid red;
}
/*HEADER*/
header{
width: 100%;
height: 225px;
background: slategray;
display: flex;
justify-content: space-between;
}
.plan_de_estudio{
width: 400px;
height: 100%;
background: red;
margin-left: 150px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 35px;
font-family: arial;
font-weight: bold;
padding: 0 100px;
box-sizing: border-box;
text-align: center;
}
.modulos{
width: 1000px;
height: 225px;
background: white;
margin-bottom: 65px;
padding-left: 60px;
padding-right: 60px;
padding-top: 20px;
box-sizing: border-box;
}
.titulo_modulo{
font-size: 20px;
font-weight: bold;
font-family: arial;
border-bottom: 3px solid red;
}
.descripcion{
font-size: 16px;
margin-top: 5px;
font-family: arial;
display: flex;
}
.descripcion div{
height: 15px;
width: 35px;
background: #CA7586;
margin-right: 5px;
border: 1px solid #595957;
}
/*FOOTER*/
footer{
display: flex;
justify-content: space-around;
margin-bottom: 2rem;
}
.carrera{
font-size: 40px;
font-family: arial;
font-weight: bold;
color: red;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.footer_cuadro{
border: 3px solid red;
display: flex;
}
.descripcion1{
width: 200px;
}
/*SOPORTE => SOLO SIRVE PARA HACER QUE LOS BORDES DEL BODY PUEDAN VERSE MÁS ABAJO*/
.soporte{
width: 100%;
height: 20px;
}
</style>
<body>
<header>
<div class="plan_de_estudio">PLAN DE ESTUDIOS</div>
<div class="modulos">
<div class="titulo_modulo">MÓDULOS DE LA CARRERA</div>
<div class="descripcion"><div></div>Procesos topográficos</div>
<div class="descripcion"><div></div>Movimiento de tierras en obras civiles</div>
<div class="descripcion"><div></div>Procesos constructivos en edificaciones</div>
<div class="descripcion"><div></div>Procesos constructivos en obras de infraestructura</div>
<div class="descripcion"><div></div>Formación de base</div>
<div class="descripcion"><div></div>Formación transversal</div>
</div>
</header>
<div class="contenedor_bordes">
<div class="contenedor">
<div class="item item1">CICLO 1</div>
<div class="item item2">CICLO 2</div>
<div class="item item3">CICLO 3</div>
<div class="item item4">CICLO 4</div>
<div class="item item5">CICLO 5</div>
<div class="item item6">CICLO 6</div>
<div class="item curso item7">TOPOGRAFÍA BÁSICA</div>
<div class="item curso item8">TOPOGRAFÍA PARA EDIFICACIONES Y OBRAS CIVILES</div>
<div class="item curso item9">FUNDAMENTOS, OPERACIONES Y GESTIÓN DEL MOVIMIENTO DE TIERRAS EN EDIFICACIONES Y OBRAS CIVILES</div>
<div class="item curso item10">CAD BIDIMENSIONAL</div>
<div class="item curso item11">TECNOLOGÍA DE ACABADOS Y CARPINTERÍA EN EDIFICACIONES</div>
<div class="item curso item12">GESTIÓN DE RECURSOS EN OBRAS CIVILES</div>
<div class="item curso item13">EXPERIENCIAS FORMATIVAS EN SITUACIONES REALES DE TRABAJO</div>
<div class="item curso item14">DIBUJO TOPOGRÁFICO ASISTIDO POR COMPUTADORA</div>
<div class="item curso item15">EXPERIENCIAS FORMATIVAS EN SITUACIONES REALES DE TRABAJO</div>
<div class="item curso item16">DIBUJO DE ESTRUCTURAS</div>
<div class="item curso item17">PRESUPUESTOS, PROGRAMACIÓN Y ADMINISTRACIÓN DE OBRAS DE EDIFICACIÓN</div>
<div class="item curso item18">CAMINOS Y PAVIMENTO</div>
<div class="item curso item19">MATEMÁTICA APLICADA</div>
<div class="item curso item20">EXPERIENCIAS FORMATIVAS EN SITUACIONES REALES DE TRABAJO</div>
<div class="item curso item21">DIBUJO ARQUITECTÓNICO</div>
<div class="item curso item22">TECNOLOGÍA DEL CONCRETO</div>
<div class="item curso item23">DIBUJO DE INSTALACIONES ELÉCTRICAS</div>
<div class="item curso item24">SISTEMAS DE AGUA POTABLE Y SANEAMIENTO</div>
<div class="item curso item25">FÍSICA APLICADA</div>
<div class="item curso item26">GEOLOGÍA</div>
<div class="item curso item27">TECNOLOGÍA DE LA CONSTRUCCIÓN</div>
<div class="item curso item28">FIERRERÍA Y ENCOFRADOS EN EDIFICACIONES</div>
<div class="item curso item29">SISTEMAS ELÉCTRICOS EN EDIFICACIONES</div>
<div class="item curso item30">SISTEMAS DE RIEGO Y OTRAS OBRAS</div>
<div class="item curso item31">FUNDAMENTOS DE DIBUJO TÉCNICO</div>
<div class="item curso item32">COMPORTAMIENTO DE LOS MATERIALES</div>
<div class="item curso item33">ALBAÑILERÍA EN EDIFICACIONES</div>
<div class="item curso item34">DIBUJO DE INSTALACIONES SANITARIAS Y DE GAS</div>
<div class="item curso item35">INSTALACIÓN DE SISTEMAS ELÉCTRICOS</div>
<div class="item curso item36">EXPERIENCIAS FORMATIVAS EN SITUACIONES REALES DE TRABAJO</div>
<div class="item curso item37">TECNOLOGÍA DE LOS MATERIALES</div>
<div class="item curso item38">INGLÉS TÉCNICO BÁSICO</div>
<div class="item curso item39">INGLÉS TÉCNICO APLICADO</div>
<div class="item curso item40">SISTEMAS SANITARIOS Y DE GAS EN EDIFICACIONES</div>
<div class="item curso item41">EXPERIENCIAS FORMATIVAS EN SITUACIONES REALES DE TRABAJO</div>
<div class="item curso item42">GESTIÓN DE OBRAS CIVILES</div>
<div class="item curso item43">TÉCNICAS DE COMUNICACIÓN</div>
<div class="item curso item44">AUTOCAD Y LECTURA DE PLANOS ASISTIDO POR COMPUTADORA</div>
<div class="item curso item45">MEDIO AMBIENTE</div>
<div class="item curso item46">INSTALACIÓN DE SISTEMAS SANITARIOS Y DE GAS</div>
<div class="item curso item47">NORMATIVIDAD TÉCNICA Y LEGAL EN EDIFICACIONES Y OBRAS CIVILES</div>
<div class="item curso item48">PROYECTO DE APLICACIÓN PROFESIONAL</div>
<div class="item curso item49">ÉTICA</div>
<div class="item curso item50">FORMACIÓN Y ORIENTACIÓN LABORAL</div>
<div class="item curso item51">INNOVACIÓN TECNOLÓGICA</div>
<div class="item curso item52">METRADOS EN EDIFICACIONES</div>
<div class="item curso item53">LIDERAZGO Y TRABAJO EN EQUIPO</div>
<div class="item curso penultimo">EXPERIENCIAS FORMATIVAS EN SITUACIONES REALES DE TRABAJO</div>
<div class="item curso ultimo">SEGURIDAD Y SALUD EN EL TRABAJO</div>
</div>
</div>
<footer>
<div class="carrera">EDIFICACIONES Y OBRAS CIVILES</div>
<div class="footer_cuadro">
<div class="descripcion1">EXPERIENCIAS FORMATIVAS EN SITUACIONES REALES DE TRABAJO</div>
<div class="descripcion2">=</div>
<div class="descripcion3">PRACTICAS PRE-PROFESIONALES</div>
</div>
</footer>
<div class="soporte"></div>
</body>
</html>