Centering items in Slick carousel

[bmcode]

Here is the CodePen link: https://codepen.io/bmcdesign/pen/qBRgjaY

I want the items of the Slick carousel to be centered while responsive. Right now, if you lower the width of the browser, the items will be located justified to the left.

This person had the exact same problem: https://stackoverflow.com/questions/33130035/how-can-i-center-items-in-slick-carousel/33132939

I tried both solutions, and no luck.

The first solution didn’t do anything for me:

.slick-track {
    margin:auto;
}

Centering the images works, but it messes up the positioning of the paragraphs (img-slide-text).

How can I resolve this issue? Any help would be greatly appreciated. Thanks!

[PaulOB]

Try something like this:

.slick-slide img{margin:auto;left:auto;}
p.img-slide-text{margin:2rem auto 0;}