3 column preview card component

Hey there. That is a good progress.

You are using flex which is a good start for a responsive layout. The reason of why the cards are not placed in the center because you kind of reset the flex state of the parent element with display: block on mobile screen.

@media(max-width:700px){
    .main{
      display:block;
    }
}

I believe you want to make the cards direction vertical instead of horizontal. You can achieve it by:

@media(max-width:700px){
    .main{
      flex-direction: column
    }
}

With flex-direction you can change the direction of the flex items in the flex container either to row or column. If you want to know more about flexbox, you can read it here. Kevin Powell also covered up this topic in his video