width issue for responsive slide in react-slick

Question

I am trying to make responsive slides in react using the slick but I am not able to solve the problem of width , also the slides are doesnot appearing in single horizontal line , some of them are going into the next row vertically

This is my slider settings :

  const settings = {
    infinite: true,
    speed: 1000,
    slidesToShow: 4,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1000,
    arrows: false,
    dots: false,

    responsive: [
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: false
        }
      },
      
    ]
  };

this is my component :

return (
    <div className="max-w-7xl mx-auto">
      <div className="flex justify-center my-12 font-kanit text-[#2E2E2E]">
        // other hardcoded content
      </div>
      <div>

      <Slider {...settings}>
        {slidesContent.map((slide, index) => (
          <div
            key={index}
            className="slick-slide md:h-386 w-[500px] h-[350px] md:w-320 rounded-2xl border-2 border-black py-4 px-4 md:mr-20"
          >
            <p
              className={`${slide.bgColor} text-[16px] text-[#323232] font-semibold font-kanit py-1 px-8 rounded-full inline-block`}
            >
              {slide.text}
            </p>

            <p className="my-4 font-poppins text-[14px]">{slide.content}</p>

            <p className="bg-testUser py-2 px-8 rounded-xl text-[16px] text-[#323232] font-semibold inline-block absolute top-360">
              {slide.user}
            </p>
          </div>
        ))}
      </Slider>
      </div>
    </div>
  );