Qrcode-Frontend-Mentor

Hello there 👋😉 I can't help notice about the fact that your component is overflowing vertically 🥲🥹, let me help you in that aspect:

1.) To fix your overflow, don't forget to add your width and height

body {
   width: 100%;
   height: 100vh; // or 100%

   // Other components
}
main {
   width: 100%;
   height: 100vh; // or 100%

   // Other components
}

2.) I have noticed that your usage of flexbox has also contributed on the overflow, although I am not particularly an expert of flexbox but using flex-direction: column instead of flex-flow: column wrap should be enough. 😲 "Wrap" happens when the element inside is much bigger than the container, since your <p> is bigger that the container without a "width" then it would result into an overflow. Instead, use 100% on the <p> element so it will only have a width that's as big as the container can contain:

main {
   width: 100%;
   height: 100vh; // or 100%
   display: flex;
   flex-direction: column;

   // Other components
}
main p {
   width: 100%;

  // Other components
}

3.) Last, since the texts in the design needs to be centered, use text-align: center; 😁

main h1 {
  color:  hsl(218, 44%, 22%);
  font-weight: 700;
  width: 100%;

   text-align: center;
}
main p {
   color: hsl(220, 15%, 55%);
   width: 100%;
   font-size: 30px;
   font-weight: 400;

   text-align: center;
}

There are still a lot I can point out but I know for now this is already great progress you have here 😁 well done 🎉🎊 Trust the process🎯.

To know more about responsive layouts, check Responsive Web Design Media Queries