Qr Code Using Css Margin and padding

Hi

This doesn't look like the design yet and needs some work. Below are changes I made in browser with some notes.

I strongly recommend you

• use a modern css reset
• learn more about html structure and semantics
• learn modern css techniques. Sites like Modern CSS by Steph Eckles, content by Andy Bell and Heydon Pickering etc will help
• Use grid/flexbox
• Ask specific questions when you are building solutions and you struggle to make them look like the designs - seek out the advice. And share specific questions / learning focus when you post solutions to encourage more feedback.
• Don't jump ahead until you've done lots more small challenges like these

/* styling.css | https://frontendmentorqrchallenge.netlify.app/Css/styling.css */

.container {
  /* margin-left: 37%; */
  /* margin-top: 15%; */
  /* padding: 20px; */
  /* width: 300px; */
  /* height: 470px; */
  max-width: 22rem;
  padding: 1.2rem;
  note: Box shadow does not look like design;
  margin: 1rem;
  text-align: center;
}

.qrcontainer img {
  /* width: 300px; */
  /* height: 300px; */
  max-width: 100%;
  display: block;  // part of standard reset
  note: Alt text. QR code to where???;
}

.textcon {
  /* text-align: center; */ 
  note: where is font size and line height?;
  note: why is the heading a h3?
  note: take control of vertical margin, dont rely on browser default styles;
}

.textcon p {
  margin-bottom: 0;
}

body {
  note: Use a CSS reset ! A modern basic one would suffice;
  // center the card on the viewport:
  min-height: 100vh;
  display: grid;
  place-content: center;
  margin: 0; // part of a standard reset
}

h3 {
  note: DO not use brs to create line breaks ! Line length is already controlled by max-width on the card;
}