nose por que queda asi el codigo ya lo revise varias veces

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

.headerPrincipal .container { display: flex; align-items: center; justify-content: space-between; } .headerPrincipal-nav { display: flex; } .rodapePrincipal-patrocinadores .container { display: flex; justify-content: space-between; } .rodapePrincipal-patrocinadores-list { display: flex; align-items: center; 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; height: 250px; flex-wrap: wrap; } .contenidoPrincipal-cursos { display: flex; flex-wrap: wrap; } .contenidoPrincipal-cursos-link { display: flex; width: 23%; } .videoSobre .container { display: flex; }

/*Responsive */ @media (max-width: 768px) { .headerPrincipal .container { flex-direction: column; align-items: initial; text-align: center; } .headerPrincipal-nav { flex-direction: column; } .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-legend { width: 100%; } .rodapePrincipal-patrocinadores-list { align-items: center; width: 100%; margin: 0; } .rodapePrincipal-contatoForm-fieldset { justify-content: center; } }

Hola Brandon,

Por lo que veo, estás teniendo problemas con la visualización de tu código, incluso después de revisarlo varias veces. No te preocupes, ¡estamos aquí para ayudarte!

Primero, es importante recordar que Flexbox es una herramienta muy útil para manejar el diseño de la página y la disposición de los elementos en ella. Sin embargo, también puede ser un poco complicado de entender al principio.

En tu caso, parece que estás intentando hacer que tu sitio web sea responsive, lo que significa que se verá bien en diferentes tamaños de pantalla. Para lograr esto, estás utilizando media queries para cambiar el diseño de tu página en función del ancho de la pantalla.

Por ejemplo, en tu código, tienes una media query que dice:

@media (max-width: 768px) {
  /* Aquí va tu código CSS */
}

Este código se aplicará solo cuando el ancho de la pantalla sea de 768px o menos. Dentro de esta media query, estás cambiando la dirección de los elementos flexibles a "columna" y ajustando su ancho al 100%.

Si tu código no se ve como esperabas, podría ser debido a varios factores. Aquí hay algunas cosas que podrías revisar:

Asegúrate de que estás aplicando las clases CSS correctas a los elementos correctos en tu HTML. Por ejemplo, si tienes un elemento con la clase .headerPrincipal .container, asegúrate de que estás aplicando esa clase al elemento correcto en tu HTML.
Revisa si hay errores de sintaxis en tu CSS. Un error común es olvidar cerrar una llave {} o un paréntesis ().
Asegúrate de que estás aplicando las propiedades CSS correctas. Por ejemplo, flex-direction: column; hará que los elementos flexibles se apilen verticalmente, mientras que flex-direction: row; los hará apilarse horizontalmente.
Finalmente, asegúrate de que estás viendo tu página en un tamaño de pantalla que se ajuste a tus media queries. Si estás viendo tu página en una pantalla más grande que 768px, tu media query no se aplicará.

Espero que estas sugerencias te ayuden a identificar y solucionar el problema. Recuerda, la práctica hace al maestro, así que no te desesperes si las cosas no salen bien al principio. ¡Sigue intentándolo!

Espero haber ayudado y buenos estudios!