Basic html e Css(Flexbox)

Some recommendations regarding your code that could be of interest to you.

• In order to center the card correctly, you'd better add min-height: 100vh to the body
• If you want, you can use the recommended color for the background:

body{
   /* flex-direction: row; */      /* you don't need this */
   min-height: 100vh;
   /* background-color: rgba(131, 166, 231, 0.548); */
   background-color: hsl(212, 45%, 89%);
}

• If you use flexbox, you don't need to give margin to the .qr_code in order to center the card because flexbox already provides it. Additionally, the flexbox here doesn't work, so you can remove it.
• You can update padding of the card and give a max-width to the .qr_code. If you use the max-width, you don't need media queries for this solution because it makes the card responsive. If you want, you can delete media queries.

.qr_code {
   /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* margin-top: 10vh; */
  /* padding: 15px; */
  /* padding-left: 15px; */
  /* padding-right: 15px; */
  padding: 15px 20px 30px;
  max-width: 280px;
  text-align: center;
}

• You can update the style of image as I suggest, so the image will be positioned completely on the card

.qr_code img {
  /* width: 240px; */
  width: 100%;
  height: 100%;
  display: block;
}

• Finally, I don't recommend you to give width to text for this solution, you can remove them:

.qr_code .first_p {
  /* max-width: 220px; */
}

.qr_code .second_p {
  /* max-width: 200px; */
}

Hope I am helpful. :)