cards by flexbox , responsive design

Hey ! Great work out there i just notice that you using margin :auto to center the card component but doesn't work as expected since there where missing properties that is min-height or height by add this on your main element the card component will properly align on center , you can see the changes when you zoom-in and zoom out and notice the card component behave on its position. that's all happy coding !!

you can use also display property that is grid or flex-box

main {
  width: 90%;
  margin: auto;
  padding: 2rem 0;
  min-height: 100vh;// add this
}