When I want to render a list of products inside a container, I have difficulty inserting them since the list is displayed outside the div on the page, like this.
I would like the products to be inside the gray container, this is the render
.
<section>
<div className="container-lista">
<div className='columna-lista'>
<h2>Lista</h2>
<br></br>
<div className='lista'>
{renderProductos(productos)}
</div>
</div>
</div>
</section>
and the styles.css
.container-lista {h2{font-family: $oswald; font-size:4rem; color:darkcyan; background-color:lightgray; width:50%;
height: 100rem; text-align: center; }}
.columna-lista { margin-left: 30%; position: relative}
.lista {background-color: salmon; width: 300px;
text-align: center; position: absolute;}
At first glance the error is simple, remove from the .list class , the position: absolute; . But in the absence of a more functional or real code, I can not give you more instructions.
You have a series of failures like:
The other thing is that apart from the fact that your code is not 100% functional, it does not even generate an efficient reproduction of the error that is presented to you, I advise you to please adjust it to be able to give you a better answer. You can use the JavaScript/HTML/CSS snippet button or by pressing the Ctrl + M key combination . Good day.