The code snippet provided below demonstrates that the lowest level of items is located outside the container.
I understand that this is due to the
position:absolute; transform:translate(-33%)Is there a way to include the three lowest elements inside the container and enable horizontal scrolling for the entire content?
body {
background-color: #eaeaea;
width: 2000px
}
/* Additional CSS classes omitted for brevity */
<div class="CB">
<div class="CB_Menu">
header
</div>
<div class="CB_Content">
<div class="Products">
<div>
<div class="Product">
<!-- Product Details -->
</div>
<!-- Additional HTML markup omitted for brevity -->
</div>
</div>
<div class="Parts">
<div>
<div class="lineTop active">
<div class="LineTop_Line"></div>
<div class="LineTop_Line"></div>
</div>
<div>
<div class="Part">
<!-- Part Details -->
</div>
<!-- Additional HTML markup omitted for brevity -->
</div>
<div class="Part">
<!-- Another set of Part Details -->
</div>
<!-- Additional Parts sections omitted for brevity -->
</div>
</div>
</div>
</div>