HOLA BUENOS DIAS, QUIERO COMPARTIRLES MI PROGRAMA, PARA QUE Alguien ME PUEDA ORIENTAR EN EL TEMA DE LA PARTE QUE VOY A COMPARTIR DE MI PROGRAMA (PANTALLAZO) ENTONCES NO SE POR QUE ME QUEDÓ ASI Y NO SE ENCUENTRA COMO ALINEADO, ENTONCES EL DETALLE ESTA EN EL "MAPA DE CURSOS 
Hola Stive, como estás?
Puedes por favor compartir tu código, tanto el html como el css
Si necesitas ayuda, estaremos aquí! Un saludo!
hola JOSE GONZALEZ aqui te dejo compartir los codes de los programas
HTML , COMPARTIRE HASTA LA PARTE DONDE COMIENZA FOOTER
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mini Alura | Cursos online</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/flexbox.css">
</head>
<body>
<header class="headerPrincipal">
<div class="container">
<h1 class="headerPrincipal-titulo">
<a href="#">Mini Alura</a>
</h1>
<nav class="headerPrincipal-nav">
<a class="headerPrincipal-nav-link" href="#">Home</a>
<a class="headerPrincipal-nav-link" href="#">Cursos</a>
<a class="headerPrincipal-nav-link" href="#">Sobre Alura</a>
<a class="headerPrincipal-nav-link" href="#">Contactos</a>
<a class="headerPrincipal-nav-link headerPrincipal-nav-link-app" href="#">Nuestra APP</a>
</nav>
</div>
</header>
<main class="contenidoPrincipal">
<div class="container">
<h2 class="subtitulo">Nuestros cursos</h2>
<nav>
<ul class="contenidoPrincipal-cursos">
<li class="contenidoPrincipal-cursos-link"><a href="#">Java</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">PHP</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">Ruby on Rails</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">.NET</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">Pascal</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">Flexbox</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">Desarrollo Web</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">Java Web</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">Javascript</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">AngularJS</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">TDD com C</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">Redes de computadores</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">MySQL</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">MariaDB</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">Postegres</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">Lógica de programación</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">Lógica de programación</a></li>
<li class="contenidoPrincipal-cursos-link"><a href="#">Lógica de programación</a></li>
</ul>
</nav>
</div>
<section class="videoSobre">
<div class="container">
<iframe class="videoSobre-video" width="560" height="315" src="https://www.youtube.com/embed/bIlOsJzBVaY?list=PLh2Y_pKOa4UcF1BYPJR3EIMRi3nWAUxIp" frameborder="0" allowfullscreen></iframe>
<div class="videoSobre-sobre">
<h2 class="videoSobre-sobre-title">Ventajas de Mini Alura</h2>
<ul class="videoSobre-sobre-list">
<li class="videoSobre-sobre-item">Estudia donde quiera</li>
<li class="videoSobre-sobre-item">Nuevos cursos todos los meses</li>
<li class="videoSobre-sobre-item">Cursos compatibles con el mercado</li>
</ul>
<button class="videoSobre-button">Inscrivase ya</button>
</div>
</div>
</section>
</main>
HTML FOOTER
<footer class="rodapePrincipal">
<div class="container">
<section class="rodapePrincipal-navMap">
<h3 class="subtitulo">Mapa de cursos</h3>
<nav class="rodapePrincipal-navMap-list">
<h4 class="navmap-list-title navmap-list-title-backend">Lenguajes Backend</h4>
<a class="rodapePrincipal-navMap-link" href="#">Java</a>
<a class="rodapePrincipal-navMap-link" href="#">PHP</a>
<a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
<a class="rodapePrincipal-navMap-link" href="#">Scala</a>
<a class="rodapePrincipal-navMap-link" href="#">Python</a>
<a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
<a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
<a class="rodapePrincipal-navMap-link" href="#">Lógica de programación</a>
<h4 class="navmap-list-title navmap-list-title-frontend">Lenguajes Frontend</h4>
<a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
<a class="rodapePrincipal-navMap-link" href="#">Desarrollo Web</a>
<a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
<a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
<a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
<a class="rodapePrincipal-navMap-link" href="#">Polymer</a>
<h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
<a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
<a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
<a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
<a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
<a class="rodapePrincipal-navMap-link" href="#">Django</a>
<a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>
<h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de datos</h4>
<a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
<a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
<a class="rodapePrincipal-navMap-link" href="#">Postegres</a>
</nav>
</section>
</div>
<section class="rodapePrincipal-patrocinadores">
<div class="container">
<ul class="rodapePrincipal-patrocinadores-list">
<li>
<a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-alura" href="#">
<img src="img/logos/alura.svg" alt="Logo da Alura">
</a>
</li>
<li>
<a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-caelum" href="#">
<img src="img/logos/caelum.svg" alt="Logo da Caelum">
</a>
</li>
<li>
<a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-casaDoCodigo" href="#">
<img src="img/logos/cdc.svg" alt="Logo da Casa do Código">
</a>
</li>
</ul>
<form class="rodapePrincipal-contatoForm" action="#">
<fieldset>
<legend class="rodapePrincipal-contatoForm-legend" for="email-contato">Entre en contacto</legend>
<div class="rodapePrincipal-contatoForm-fieldset">
<input class="rodapePrincipal-contatoForm-emailInput" type="email" name="email-contato" id="email-contato">
<button class="rodapePrincipal-contatoForm-submit" type="submit">Enviar</button>
</div>
</fieldset>
</form>
</div>
</section>
</footer>
</body>
</html>CSS DEL PROGRAMA
.headerPrincipal .container {
display: flex;
align-items: center;
justify-content: space-between;
/*Espacio entre elementos*/
}
.headerPrincipal-nav {
display: flex;
/* me permite poner los menus de mi header en horizontal */
}
.rodapePrincipal-patrocinadores .container {
display: flex;
justify-content: space-between;
}
.rodapePrincipal-patrocinadores-list {
display: flex;
align-items: center;
/* dejar alineados nuestros items o logos verticalmente de footer*/
justify-content: space-around;
width: 70%;
margin-right: 5%;
}
.rodapePrincipal-contatoForm {
width: 25%;
}
.rodapePrincipal-contatoForm-fieldset {
display: flex;
}
.rodapePrincipal-navMap-list {
display: flex;
flex-direction: column;
/*usa los items o elementos en columnas */
height: 250px;
/*hasta este paso los items están en columnas pero debo agregar nuevo code para que respete el espacio del footer porque se salen los elementos de su espaciamiento
para eso debo agregar un code llamado flex-wrap: wrap; que hace que mis elementos cuando lleguen a 250px quiebre y pase nuevamente pero al lado de los que ya estan organizados. */
flex-wrap: wrap;
}
.contenidoPrincipal-cursos {
display: flex;
flex-wrap: wrap;
}
.contenidoPrincipal-cursos-link {
display: flex;
width: 23%;
}
.videoSobre .container {
display: flex;
}
.videoSobre-sobre {
text-align: center;
display: flex;
flex-direction: column;
}
.videoSobre-video {
flex-grow: 2; /*Me permite a que se incremente o aumente de su tamaño prederterminado mi item */
flex-shrink: 2; /*Me permite decrementar el tamaño de mi item del recuadro del video cada vez que vaya reduciendo la pantalla */
}
.videoSobre-sobre-list {
flex-grow: 2;
}
/*Responsive*/
@media(max-width:768px) { /* CON EL CODIGO @media le estoy diciendo que solamente sea aplicado a la parte responsiva hasta un maximo de 768px*/
.headerPrincipal .container {
flex-direction: column;
align-items: center;
}
.headerPrincipal-nav {
flex-direction: column;
align-items: initial;
/*me ayuda a incializar la linea de nav osea los items*/
text-align: center;
/*me ayuda a centralizar los textos de los items nav*/
}
.contenidoPrincipal-cursos {
flex-direction: column;
}
.contenidoPrincipal-cursos-link {
width: 100%;
}
.rodapePrincipal-navMap-list {
height: auto;
flex-wrap: nowrap;
}
.rodapePrincipal-patrocinadores .container {
flex-direction: column;
}
.rodapePrincipal-contatoForm {
width: 100%;
}
.rodapePrincipal-patrocinadores-list {
align-items: center;
width: 100%;
margin: 0%;
}
.rodapePrincipal-contatoForm-fieldset {
justify-content: center;
}
.headerPrincipal-nav-link-app {
order: -1;
}
.videoSobre .container {
flex-direction: column;
}
}