Order Summary

• There are several ways to center an element in CSS, find the one you prefer the most: https://www.freecodecamp.org/news/how-to-center-a-div-with-css-10-different-ways/, for this project since the card is the only main element in the page you can center it with the following style:

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

and also remove the margin-top: 100px; you have set in the .card styles. This way the card would be centered correctly.

• Regarding to the color issue, simply use the following styles to get the same colors as the original design:

body {
  background: hsl(225, 100%, 94%) url('./images/pattern-background-desktop.svg');
  background-size: cover;
  background-repeat: no-repeat;
}

.card {
  background-color: #fff;
}

.card__plan {
  background-color: hsl(225, 100%, 98%);
}

button {
  background-color: hsl(245, 75%, 52%);
}

.card > a {
  color: hsl(224, 23%, 55%);
}

Hope you find this helpful.

The easiest way to center your element: display: grid; justify-content: center; align-items: center;