Issues with mobile view

[fl1k]

Hello, I am using tailwindcss nextjs for my project, client rendered component and I am having issues with screens lower than about 340px. I am not sure if it is a issue with images. I have a carousel of logos with these settings

        centerMode: true,
        dots: true,
        autoplay: true,
        infinite: true,
        autoplaySpeed: 4000,
        speed: 500,
        //slidesToShow: width > 1150 ? 5 : (width > 800 ? 3 : 1),
        responsive: [
            {
                breakpoint: 800,
                settings: {
                    slidesToShow: 1,

                }
            },
            {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 3,
                }
            },
            {
                breakpoint: 3000,
                settings: {
                    slidesToShow: 5,
                }
            }
        ],
        slidesToScroll: 1,
    };

At around 320px logos enter the sides, I have tried everything. margin, padding but it all reduces the image aspect ratio instead of increasing element spacing

            <div className={"pt-6 pb-8"}>
                <Slider {...settings} className={"items-center w-full"}>
                    {logos.map((logo, index) => <div key={index} className={"container"}>
                        <div className="">
                            <Image className={"mx-auto w-auto h-[100px] "} src={logo.src} alt={logo.alt} width={400}
                                   height={200}/>
                        </div>
                    </div>)}
                </Slider>
            </div>

Could I be doing something wrong?

[fl1k]

After doing debugging I figured out the reason. It is due to

centerMode: true,