Blog Preview

Hey ! Great work out there i see that you are using margin in order to center the div or the card component and when i check the body css properties you are correct declaring the display : flex and its related attribute however using justify-self : center its not gonna work as expected what you need to add is justify-content : center and it will properly aligned on center also you can add specific height to center it you can use vh or dvh ( height : 100dvh). thats all thankyouuu. happy coding !

.main {
  background-color: var(--White);
  width: 384px;
  border-radius: 20px;
  border: 1px solid black;
  box-shadow: 5px 5px;
  padding: 24px;
  margin: 80px;// you can remove this
  height: 100%;
}

body {
  background-color: var(--Yellow);
  font-size: 16px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-self: center; // remove this
  align-items: center;
  min-height: 100dvh; // add this
  justify-content: center;// add this 
}