QR Code using Semantic HTML and CSS properities

Hey Christine, It looks good!...

My suggestions:

• Instead give each element padding: 15px; to align all at the same level, Give the container that contains all elements padding: 15px;.

• Use REM for font size, It is a must for accessibility because px in some browsers doesn't resize when the browser settings are changed.

See this article ---> CSS REM – What is REM in CSS?

.card {
  width: 320px;  /* Chenged */
  height: 500px;
  background-color: var(--White);
  border-radius: 20px;

  padding: 15px;   /* <---- Add */
}
.card .image img {
  width: 100%;   /* Chenged */
  height: 288px;  /* Chenged */
  border-radius: 10px;   /* Chenged */
  /* padding: 15px;      <---- Remove */
}
.card .text {
  font-family: "Work Sans", sans-serif;
  text-align: center;
  /* padding: 0px, 30px, 20px, 30px;     <---- Remove */

  margin-top: 24px;   /* <---- Add */
}
.card .text h1 {
  /* font-size: 18px;      <---- Remove */

  font-size: 1.47rem;    /* <---- Add */
  font-weight: 700;
  line-height: 1.4;
}

Hope this is helpful to you... Keep coding👍

Basically it is like this - * {margin: 0; padding: 0; box-sizing: border-box;}. Before writing the code you should help yourself with a graphics program, to see the dimensions and some spaces, I use Inkscape (free). For fonts, padding, marging it is best to use the units rem or em