Help! "You should have at least five code elements that are descendants of .main-section elements" i dont know what i do worg

<body>
  <nav id="navbar">
    <header>Bootstrap documentation</header>
    <ul>
      <li>
        <a class="nav-link" href="#Que_es_Bootstrap">Que es Bootstrap</a>
      </li>
       <li>
        <a class="nav-link" href="#Funciones_basicas">Funciones basicas</a>
      </li>
       <li>
        <a class="nav-link" href="#Facilidad_de_uso">Facilidad de uso</a>
      </li>
       <li>
        <a class="nav-link" href="#Sistema_de_imagenes_de_Bootstrap">Sistema de imagenes de Bootstrap</a>
      </li>
      <li>
        <a class="nav-link" href="#Documentacion_de_Bootstrap">Documentacion de Bootstrap</a>
      </li>
      <li>
        <a class="nav-link" href="#Plug-ins_de_JavaScript">Plug-ins de JavaScript</a>
      </li>
    </ul>
  </nav>
  <main id="main-doc">
    <section class="main-section" id="Que_es_Bootstrap">
      <header>Que es Bootstrap</header>
      <article>
        <p>Bootstrap es un framework de desarrollo web gratuito y de código abierto. Está diseñado para facilitar el proceso de desarrollo de los sitios web responsivos y orientados a los dispositivos móviles, proporcionando una colección de sintaxis para diseños de plantillas.</p>
        <p>En otras palabras, Bootstrap ayuda a los desarrolladores a construir sitios web más rápidamente, ya que no tienen que preocuparse por los comandos y funciones básicos. Consta de scripts basados en HTML, CSS y JS para diversas funciones y componentes relacionados con el diseño web.</p>
        <ul>
          <li>veremos las ventajas de utilizar Bootstrap y explicaremos los diferentes tipos de archivos que utiliza.</i>
          
          <li>Al final, sabrás si Bootstrap puede beneficiar a tu flujo de trabajo.</li>
        </ul>
        <p>Bootstrap es el segundo proyecto más destacado en GitHub1​ y es usado por la NASA y la MSNBC, entre otras organizaciones.</p>
        </article>
    </section>
    <section class="main-section" id="Funciones_basicas">
      <header>Funciones basicas</header>
      <article>
        <p>El objetivo principal de Bootstrap es crear sitios web responsivos y orientados a los dispositivos móviles. El framework garantiza que todos los elementos de la interfaz de un sitio web funcionen de forma óptima en todos los tamaños de pantalla.</p>
        <p>Bootstrap está disponible en dos variantes: precompilada y basada en código fuente. Los desarrolladores experimentados prefieren esta última, ya que les permite personalizar los estilos para adaptarlos a sus proyectos.</p>
        <ul>
          <li>Por ejemplo, la versión «código fuente» de Bootstrap permite acceder al puerto Sass. Esto significa que crea una hoja de estilos personalizada que importa Bootstrap, permitiéndote modificar y ampliar la herramienta según tus necesidades.</i>
          
          <li>También puedes instalar Bootstrap con un gestor de paquetes, una herramienta que gestiona y actualiza frameworks, librerías y activos.</li>
          <li>También puedes instalar Bootstrap con un gestor de paquetes, una herramienta que gestiona y actualiza frameworks, librerías y activos.</li>
        </ul>
     </article>
    </section>
    <section class="main-section" id="Facilidad_de_uso">
       <header>Facilidad de uso</header>
      <article>
        <p>En primer lugar, Bootstrap es fácil de aprender. Debido a su popularidad, hay un montón de tutoriales y foros en línea para ayudarte a empezar.</p>
        <p>Una de las razones por las que Bootstrap es tan popular entre los desarrolladores y diseñadores web es que tiene una estructura de archivos sencilla. Sus archivos están compilados para facilitar el acceso y sólo se requieren conocimientos básicos de HTML, CSS y JS para modificarlos.</p>
        <ul>
          <li>También puedes utilizar los temas de los sistemas de gestión de contenidos más populares como herramientas de aprendizaje. Por ejemplo, la mayoría de los temas de WordPress se han desarrollado con Bootstrap, a los que puede acceder cualquier desarrollador web principiante.</i>
          
          <li>Para reducir el tiempo de carga de la página del sitio, Bootstrap minifica los archivos CSS y JavaScript. Además, Bootstrap mantiene la coherencia de la sintaxis entre los sitios web y los desarrolladores, lo que es ideal para los proyectos en equipo.</li>
          </ul>
          </article>
    </section>
    <section class="main-section" id="Sistema_de_imagenes_de_Bootstrap">
      <header>Sistema de imagenes de Bootstrap</header>
      <article>
        <p>Bootstrap gestiona la visualización de imágenes y la capacidad de respuesta con sus reglas HTML y CSS predefinidas.</p>
        <p>Al añadir la clase .img-responsive, las imágenes se redimensionarán automáticamente en función del tamaño de la pantalla de los usuarios. Esto beneficiará el rendimiento de tu sitio web, ya que la reducción del tamaño de las imágenes forma parte del proceso de optimización del sitio.</p>
        <p>Bootstrap también proporciona clases adicionales como .img-circle y .img-rounded, que ayudan a modificar la forma de las imágenes.</p>
        <q>...un grupo súper pequeño de desarrolladores y yo nos reunimos para diseñar y construir una nueva herramienta interna y vimos la oportunidad de hacer algo más. A través de ese proceso, nos vimos construyendo algo mucho más sustancial que otra herramienta interna. Meses después terminamos con una primera versión de Bootstrap como una manera de documentar y compartir activos y patrones de diseño comunes dentro de la compañía.</q>
        </article>
    </section>
    <section class="main-section" id="Documentacion_de_Bootstrap">
  
    <header>Documentacion de Bootstrap</header>
    <article>
    <p>Bootstrap proporciona documentación para los desarrolladores que quieran aprender a utilizar este framework por primera vez. Aquí hay varios temas que puedes encontrar en la página de documentación de Bootstrap:</p>
    <ul>
      <li>Contenido: cubre el código fuente precompilado de Bootstrap.</li>
      <li>Navegadores y dispositivos: enumera todos los navegadores web y móviles compatibles y los componentes basados en móviles.</li>
      <li>JavaScript: desglosa varios plugins JS construidos sobre jQuery.</li>
      <li>Tematización: explica las variables Sass incorporadas para facilitar la personalización.</li>
      <li>Herramientas: te enseña a utilizar los scripts npm de Bootstrap para diversas acciones.</li>
      <li>Herramientas: te enseña a utilizar los scripts npm de Bootstrap para diversas acciones.</li>

    </ul>
  </article>
    </section>
    <section class="main-section" id="Plug-ins_de_JavaScript">
      <header>Plug-ins de JavaScript</header>
    
      <article>
        <p>Los componentes de JavaScript para Bootstrap están basados en la librería jQuery de JavaScript. Los plug-ins se encuentran en la herramienta de plug-in de jQuery. Proveen elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles. También extienden la funcionalidad de algunos elementos de interfaz existentes, incluyendo por ejemplo una función de auto-completar para campos de entrada (input). La versión 2.0 soporta los siguientes plug-ins de JavaScript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel y Typeahead.</p>
        <p>Una implementación de Bootstrap usando el Dojo toolkit también está disponible. Es llamada Dojo Bootstrap6​7​ y es un puerto de los plug-ins de Twitter Bootstrap. Usa el código Dojo al 100% y tiene soporte para AMD (Asynchronous Module Definition​).</p>
      </article>
    </section>
  </main>
</body>

hello,

can you post a link to the FCC step you are working on?
Also any other information about what you have tried so far to make it work?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.