I have this container:

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

Which is centering my 3 list items vertically. No matter the width of the page, it's always in the center. I'm trying to achieve the same effect but horizontally. I've tried using float: left; along with controlling the margins and that does work but then the problem is that it doesn't change dynamically with different widths (mobile).

I'm using the following the style the cards within the container. As I have said, it's 3 cards:

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

This is the section of the return in the component:

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