Actualización importante de la pregunta (7 de mayo) : cuando uso las teclas de flecha, puedo ver las tres cartas, pero la misma es tan grande que no cabe en la pantalla.

 <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>

Esto es parte del código portfolio.jsx en el que se ha utilizado el contenedor de cartera y la clase de contenedor.

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

Esta es la clase portfolio__container utilizada en portfolio.css y

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

Esta es la clase de contenedor utilizada en 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%; }

Estoy usando reaccionar 18 y la salida se muestra así:

la salida deseada: