Tengo este contenedor:

 export const Container = styled.section<ContainerProps>` display: flex; justify-content: center; `;

Que está centrando mis 3 elementos de la lista verticalmente. No importa el ancho de la página, siempre está en el centro. Estoy tratando de lograr el mismo efecto pero horizontalmente. He intentado usar float: left; junto con controlar los márgenes y eso funciona, pero el problema es que no cambia dinámicamente con diferentes anchos (móvil).

Estoy usando el siguiente estilo de las tarjetas dentro del contenedor. Como he dicho, son 3 cartas:

 export const Card = styled.article` border-radius: 50px; border: solid 1px #e6e6e6; font-size: 12px; box-shadow: 5px 10px 10px grey; `;

Esta es la sección de la devolución en el componente:

 if (name !== null) { return ( <Container> <Card> <CollectionAvatar image={image} /*name={name || collection}*/ type="collection" /> <br></br> <br></br> {name} </Card> </Container> ); }