How to put a "carousel" div inside "oe_structure" without overlapping

Question

I need put a "carousel" div inside "oe_structure" but not work correctly, the "carousel" :

I'm editing the template "website_sale.products"

I am new to odoo, can I inherit in my direct code to edit the ? but I still don't know how to put the slider inside the div as shown in the image!

link of the code I use:

https://codeshare.io/2pBqez

My error with div carousel is:

Answer 1

<div class="container">
  <div class="square"><div>
    <div class="s-square">
</div>

.container {
  width:80%;background:lightgray;height:500px;margin-left:10%;
  display:flex;justify-content:center;align-items:center;
} /* this container is positioned using a left-margin */

.square {width:250px;height:250px;background:white;position:relative;} /*this square is positioned by the flexbox display of its parent container (.container) */

.s-square {height:100px;width:100px;background:blue;position:absolute;top:50px;left:60px;3px dashed purple;} /* this is absolute positioning and should be avoided as much as possible b/c not very responsive-friendly */