centrer élément page principale

bonjour,
je veux centrer les element de la partie principale de ma page mais le codage n'entraine aucune modification .

.main{
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.main .content .card{
    height: 300px;
    width: 400px;
}

Ce que je veux

centrer les élément de la partie principale de ma page.

Ce que j'obtiens

aucune modification malgrés mon codage