Problem in visualizing the correct number of items on the horizontal scroll on the ScrollTrigger

I need help. I'm trying to create a horizontal scroll with GSAP and NextJS, so that when I reach the section where the event start, I can see one item instead of two. I don't know where I went wrong. I'm using GSAP and Tailwind.

What I want in the projects section is I want to see all projects in the horizontal scroll but as of now, I'm not able to see more than one project although I have two projects.

TSX + Tailwind

import React, { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import comingSoon from "../image/coming_soon.jpg";
import Image from "next/image";
import "../css/portfolio.css";

export default function Portfolio() {
  const sectionRef = useRef(null);
  const triggerRef = useRef(null);

  gsap.registerPlugin(ScrollTrigger);

  useEffect(() => {
    const pin = gsap.fromTo(
      sectionRef.current,
      {
        translateX: 0,
      },
      {
        translateX: "-=100%",
        ease: "inOut",
        duration: 9,
        scrollTrigger: {
          trigger: triggerRef.current,
          start: "top top",
          end: "+=100%",
          scrub: 1,
          pin: true,
        },
      }
    );
    return () => {
      pin.kill();
    };
  }, []);


  return (
    <section className="py-12 h-screen" id="Portfolio" ref={triggerRef}>
      <h1 className="font-heading text-6xl md:text-10xl tracking-tightest about-me text-center">
        Latest Projects
      </h1>
      <div className="horizontal_scroll_container"  ref={sectionRef}>
        <div className="scroll_section py-12 md:py-20" >
          <div className="container px-4 mx-auto">
            <div className="flex flex-wrap mx-3">
              <div className="relative w-full lg:w-1/3 mb-8 lg:mb-0 text-center lg:text-left">
                <div className="max-w-md lg:max-w-xs mx-auto lg:ml-0 mb-6 lg:mb-0">
                  <h2 className="text-3xl md:text-4xl mb-4 font-bold font-heading">
                    Lorem ipsum dolor sit amet consectut domor
                  </h2>
                  <p className="text-xs md:text-base text-blueGray-400 leading-loose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    luctus eget justo et iaculis.
                  </p>
                </div>
                <div className="lg:absolute lg:bottom-0 lg:left-0 flex justify-center">
                  <a href="http://">gkykytkrykytky</a>
                </div>
              </div>
              <div className="w-full lg:w-2/3 flex flex-wrap px-3">
                <Image priority={true} src={comingSoon} alt="" className="imgProject" />
              </div>
            </div>
          </div>
        </div>
        <div className="scroll_section py-12 md:py-20">
          <div className="container px-4 mx-auto">
            <div className="flex flex-wrap mx-3">
              <div className="relative w-full lg:w-1/3 mb-8 lg:mb-0 text-center lg:text-left">
                <div className="max-w-md lg:max-w-xs mx-auto lg:ml-0 mb-6 lg:mb-0">
                  <h2 className="text-3xl md:text-4xl mb-4 font-bold font-heading">
                    Lorem ipsum dolor sit amet consectut domor
                  </h2>
                  <p className="text-xs md:text-base text-blueGray-400 leading-loose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    luctus eget justo et iaculis.
                  </p>
                </div>
                <div className="lg:absolute lg:bottom-0 lg:left-0 flex justify-center">
                  <a href="http://">gkykytkrykytky</a>
                </div>
              </div>
              <div className="w-full lg:w-2/3 flex flex-wrap px-3">
                <Image priority={true} src={comingSoon} alt="" className="imgProject" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

CSS

.horizontal_scroll_container{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow: hidden;
    scroll-behavior: smooth;
}
.scroll_section{
    flex: 0 0 auto;
    display: inline-flex;
}

Solution

Consider removing the from the overflow-x and overflow declarations from the .horizontal_scroll_container rule:

.horizontal_scroll_container{
    …
    overflow-x: auto;
    overflow: hidden;
    …
}

const { useRef, useEffect } = React;
const comingSoon = 'https://picsum.photos/1920/1080';
const Image = (...props) => <img {...props}/>

function Portfolio() {
  const sectionRef = useRef(null);
  const triggerRef = useRef(null);

  gsap.registerPlugin(ScrollTrigger);

  useEffect(() => {
    const pin = gsap.fromTo(
      sectionRef.current,
      {
        translateX: 0,
      },
      {
        translateX: "-=100%",
        ease: "inOut",
        duration: 9,
        scrollTrigger: {
          trigger: triggerRef.current,
          start: "top top",
          end: "+=100%",
          scrub: 1,
          pin: true,
        },
      }
    );
    return () => {
      pin.kill();
    };
  }, []);


  return (
    <section className="py-12 h-screen" id="Portfolio" ref={triggerRef}>
      <h1 className="font-heading text-6xl md:text-10xl tracking-tightest about-me text-center">
        Latest Projects
      </h1>
      <div className="horizontal_scroll_container"  ref={sectionRef}>
        <div className="scroll_section py-12 md:py-20" >
          <div className="container px-4 mx-auto">
            <div className="flex flex-wrap mx-3">
              <div className="relative w-full lg:w-1/3 mb-8 lg:mb-0 text-center lg:text-left">
                <div className="max-w-md lg:max-w-xs mx-auto lg:ml-0 mb-6 lg:mb-0">
                  <h2 className="text-3xl md:text-4xl mb-4 font-bold font-heading">
                    Lorem ipsum dolor sit amet consectut domor
                  </h2>
                  <p className="text-xs md:text-base text-blueGray-400 leading-loose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    luctus eget justo et iaculis.
                  </p>
                </div>
                <div className="lg:absolute lg:bottom-0 lg:left-0 flex justify-center">
                  <a href="http://">gkykytkrykytky</a>
                </div>
              </div>
              <div className="w-full lg:w-2/3 flex flex-wrap px-3">
                <Image priority={true} src={comingSoon} alt="" className="imgProject" />
              </div>
            </div>
          </div>
        </div>
        <div className="scroll_section py-12 md:py-20">
          <div className="container px-4 mx-auto">
            <div className="flex flex-wrap mx-3">
              <div className="relative w-full lg:w-1/3 mb-8 lg:mb-0 text-center lg:text-left">
                <div className="max-w-md lg:max-w-xs mx-auto lg:ml-0 mb-6 lg:mb-0">
                  <h2 className="text-3xl md:text-4xl mb-4 font-bold font-heading">
                    Lorem ipsum dolor sit amet consectut domor
                  </h2>
                  <p className="text-xs md:text-base text-blueGray-400 leading-loose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    luctus eget justo et iaculis.
                  </p>
                </div>
                <div className="lg:absolute lg:bottom-0 lg:left-0 flex justify-center">
                  <a href="http://">gkykytkrykytky</a>
                </div>
              </div>
              <div className="w-full lg:w-2/3 flex flex-wrap px-3">
                <Image priority={true} src={comingSoon} alt="" className="imgProject" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}


ReactDOM.createRoot(document.getElementById('app')).render(<Portfolio/>);

.horizontal_scroll_container{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
}
.scroll_section{
    flex: 0 0 auto;
    display: inline-flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js" integrity="sha512-EZI2cBcGPnmR89wTgVnN3602Yyi7muWo8y1B3a8WmIv1J9tYG+udH4LvmYjLiGp37yHB7FfaPBo8ly178m9g4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js" integrity="sha512-OzC82YiH3UmMMs6Ydd9f2i7mS+UFL5f977iIoJ6oy07AJT+ePds9QOEtqXztSH29Nzua59fYS36knmMcv79GOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.0"></script>

<div id="app"></div>