QR code component card

1. I had issues with the margins and size of the divs. However, I used my discretion in creating one with the dimensions I felt were right

2. When using the inspect tool in chrome and resizing the webpage, the paragraph element just out of the div and I do not know how to resolve that.

Here's the link to the image code below:

HTML code

   <div class="text">
      <h1>Improve your front-end skills by building projects</h1>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>

CSS code

h1 {
    font-family: "Outfit";
    font-size: 17px;
    font-weight: 700;
    color: hsl(218, 44%, 22%);
}

.text {
    width: 80%;
    margin: 0 auto;
    height: auto;
    position: relative;
    bottom: 5;
    top: 4%;
    word-wrap: break-word;
}

p {
    height: inherit;
    font-family: "Outfit";
    font-size: 15px;
    color: hsl(220, 15%, 55%);
    font-weight: 500;
}