Major Update to the Question(7th May): When I am using my arrow keys, I could see all of the three cards but still the same is as big as it doesn't fit on the screen.

 <div className="container portfolio__container">
      {
        data.map(({id, image, title, github, demo}) => {
          return (
            <article key = {id} className="portfolio__item">
          <div className="portfolio__item-image">
            <img src={image} alt={title} width="480" height="360" />
          </div>
          <h3>Chat App using React and Socket</h3>
          <div className="portfolio__item-cta">
            <a
              href={github}
              className="btn third about-btn"
              target="_blank" rel="noreferrer"
            >
              Github
            </a>
            <a
              href={demo}
              className="btn third about-btn"
              target="_blank" rel="noreferrer"
            >
              Live Demo
            </a>
          </div>
        </article>
          )
        })
        }
      </div>

This is part of the portfolio.jsx code in which portfolio container and container class has been used.

.portfolio__container{
    display: grid;        
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 2.5rem;
}

This is the portfolio__container class used in portfolio.css and

.container{
    width: var(--container-width-lg);
    margin: 0 auto;
}

This is the container class used in index.css

:root{
    --color-bg: #1f1f38;
    --color-bg-variant: #2c2c6c;
    --color-primary: #4db5ff;
    --color-primary-variant: rgba(77,181,255,0.4);
    --color-white: #fff;
    --color-light: rgba(255, 255, 255, 0.6);

    --transition: all 400ms ease;
    

    --container-width-lg: 75%;
    --container-width-md: 86%;
    --container-width-sm: 90%;
}

I am using react 18 and the output shows like this:

the desired output: