when i scroll until the vision mission section the sticky doesn’t work.
i need help, the body has more containers too.
I tried different positions and i couldn’t make that works. i don’t know how can i fix it 🙁
all containers are inside the body

Part of my CSS:

    ``` header {
       position: sticky;
       top: 0;
       z-index: 999;
   }

       .container {
       width: 100%;
       height: 80px;
       background-color: #CFBBC0;
       display: flex;
       align-items: center;
       box-sizing: border-box;




   }

   nav {
       padding: 0 17rem;
       display: flex;
       align-items: center;
       justify-content: space-between;

   }

   nav li {
       list-style-type: none;
       padding: 0;
   }

  .visionymision {
       margin: 60px 0;
       background-color: #CFBBC0;
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center; } ```

Part of my html:

       <div class="banner">
       </div>

       <header>
       <div class="container">
           <figure class="logo">
               <a href="#inicio">
                   <img src="/imagenes/Texto del párrafo (1).png" alt="logo"> </a>
           </figure>
           <nav>

               <li><a href="#quiensoy">¿Quién soy?</a></li>
               <li><a href="#clases">Clases</a></li>
               <li><a href="#contacto">Contacto</a></li>

           </nav>
       </div>
   </header>
   <div class=visionymision>
       <img src="imagenes/Euge-347.png" alt="">
       <div class="textov">
           <p>lorem </p>
           <p>
               lorem
       </div>
   </div>