I'm trying to make a ul container with display: flex take 100% of its parent's width. However, when the screen size is reduced, the ul doesn't maintain the 100% width. If I remove display: flex, it works as expected. Here are my HTML and CSS:
here is the codepen you should put it on a 776px width
<section class='aboutus-container'><div class='aboutus-content'><div class='aboutus-text'><h1>Sobre Nosotros</h1><h3>Algun texto aca </h3><p class='about-us-legend'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><ul class='aboutus-card-container'><li class='aboutus-card'><div class='about-us'><p>Años de experiencia</p></div></li><li class='aboutus-card'><div class='about-us'><p >Unidades construidas</p></div></li><li class='aboutus-card'><div class='about-us'><p>calidad en nuestros <span style={{ display: 'block' }}>procesos</span></p></div></li></ul></div><div class='aboutus-photo-container'><img src={aboutus} alt="" /></div></div></section>.aboutus-container { background-color: #EDF2E7; display: flex; width: 100%; justify-content: center; align-items: center;}.aboutus-content { display: flex; width: 90%;}.aboutus-text { width: 50%; display: flex; flex-direction: column; padding: 20px;}.aboutus-photo-container { width: 50%;}.aboutus-photo-container img { width: 100%; height: 100%;}.aboutus-card { list-style: none; display: flex; flex-direction: column; background-color: #7FA154; padding: 24px; border-radius: 10px; justify-content: center; align-items: center;}.aboutus-card-container { display: flex; padding-left: 0; gap: 15px; width: 100%; /* Ensure full width */ box-sizing: border-box; /* Include padding and border in width */}As you can see in the image the cards are overlapping the image and not taking the 100% of the width
