0

Estoy haciendo un header igual a este: introducir la descripción de la imagen aquí

Mi problema es por qué al momento de ponerle un margin-botom a mi div "modulos" no respeta la maquetación. introducir la descripción de la imagen aquí

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>

2 respuestas 2

2

Espero esta solución conteste tu pregunta.

Ten presente que los estilos son mejor manejarlos en una carpeta por aparte CSS y vincularlos en tu HTMl.

De buenas prácticas se recomienda no dejar texto en los divs, si no encerrarlos en una etiqueta p de párrafo h1 hasta h6 para títulos y subtítulos.

Te dejo una solución que puede mejorar tu código actual contesta tu pregunta sobre el margen.

/* LOS ESTILOS CSS CONTIENEN SUS RESPECTIVOS PREFIJOS PARA CADA NAVEGADOR*/

@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  max-width: 95%;
  margin: 0 auto;
}

.contenedor {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[6];
  grid-template-columns: repeat(6, 1fr);
  -ms-grid-rows: 64px (128px)[9];
  grid-template-rows: 64px repeat(9, 128px);
  /*32px, 128px*/
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  width: 100%;
  /*margin: 2rem auto;*/
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.item {
  background: #595957;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.5rem;
  color: white;
  font-family: arial;
  font-weight: bold;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.curso {
  font-size: 15px;
  font-weight: initial;
  color: black;
  border-bottom: 4px solid;
  padding: 0 5px;
  font-weight: 500;
}

.penultimo {
  -ms-grid-row: 10;
  -ms-grid-row-span: 1;
  grid-row: 10/11;
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  grid-column: 4/span 1;
}

.ultimo {
  -ms-grid-column: 5;
  -ms-grid-column-span: 1;
  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: 230px;
  background: slategray;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.plan_de_estudio {
  width: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 230px;
  background: red;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

header .plan_de_estudio h1 {
  color: white;
  font-size: 30px;
  text-transform: uppercase;
  font-family: arial;
  font-weight: bold;
  text-align: center;
}

header .modulos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

header .modulos .desc_modus {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

header .modulos .desc_modus .titulo_modulo {
  border-bottom: 1.5px solid red;
  margin-bottom: 15px;
}

header .modulos .desc_modus .titulo_modulo h2 {
  font-size: 20px;
  text-align: center;
  width: 100%;
  padding: 5px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
}

.descripcion {
  font-size: 16px;
  margin-top: 5px;
  font-family: arial;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.descripcion div {
  height: 15px;
  width: 35px;
  background: #CA7586;
  margin-right: 5px;
  border: 1px solid #595957;
}

/*FOOTER*/

footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin-bottom: 2rem;
}

.carrera {
  font-size: 40px;
  font-family: arial;
  font-weight: bold;
  color: red;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.footer_cuadro {
  border: 3px solid red;
  display: -webkit-box;
  display: -ms-flexbox;
  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;
}
<!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>
    <link rel="stylesheet" href="Css/Estilos.css">
</head>

<body>
    <div class="container">
        <header>
            <div class="plan_de_estudio">
                <h1>Plan de Estudios</h1>
            </div>
            <div class="modulos">
                <div class="desc_modus">
                    <div class="titulo_modulo">
                        <h2>Modulos de la Carrera</h2>
                    </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>

            </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>
    </div>


</body>

</html>

Se añaden una nuevas clases que puedes modificar a tu gusto.

Espero te sirva y sea útil la solución.

0

El problema que estas presentando es que le estas dando margin incorrectamente a tu contenedor de módulos.

Es más recomendable que para posicionar elementos en el HTML des una margin superior si lo requieres y el margin left y rigth esa automático para que se centre correctamente en tu contenedor usar FLEXBOX es una buena Opción.

Te dejo un ejemplo de cómo lo puedes corregir .

header .modulos
{
  width: 100%;
  height: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
<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>

Sin la necesidad de dar margin bottom. Con esas líneas de código en su CSS centras tu contenedor Modulo correctamente y puedes darle un margin-bottom a tu clase descripción para que no queden tan juntas de esta manera su diseño no se desborda.

Espero sea de utilidad.

Saludos

5
  • wow, osea que en resumen, cuando uso flex-box no puedo aplicar margin-botom :( el 23 ene. 2019 a las 21:08
  • Si lo puedes usar claro pero, el problem es que estas dando margin no adecuados que desbordan y dañan tu diseño. el 23 ene. 2019 a las 21:10
  • Con flexbox puedes posicionar elementos mucho más fácilmente. Puedes darle el margin bottom a tu clase descripción no a módulos así no se te daña el diseño. el 23 ene. 2019 a las 21:12
  • ¿puedo poner todo mi código para que me digas que margin esta mal?, porque lo estoy revisando y no veo ningún problema. el 23 ene. 2019 a las 21:22
  • es cortito el código, ya lo actualice. el 23 ene. 2019 a las 21:22

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.