How to make a responsive design using flex?

Question

This is my site URL

In Inspect mode mobile view when I click on the last circle of heel, two circles appear on top of it. I want those two circles to appear at the center.

If I remove justify-content: space-between from the css, then those two circles appear at the center. However the first circle appears only partially in mobile view while scrolling horizontally. How to solve this problem?

Thanks

Answer 1

After digging for quite a while i found the solution.

just give the container of the circles a padding left of 100px in the media query.

code :-

.row.align-center.justify-center {
padding-left: 100px;
}

Answer 2

Add Justify Center to the div after .container height in style and mark it important

position: relative;
bottom: 215px;
justify-content: center !important;