Responsive Qr code scanner psge using css ,html5

Enclosing the image, title, and text into an article or div element will help. You can then center the article/div element without worrying about the image.

<article>
    <img src="yourImg.jpg" />
    <h1>card title</h1>
    <p>card text</p>
</article>

In the CSS, you could position the article element in the center by adding flex box to the body.

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
   align-items: center;
}

css-tricks.com/snippets/css/a-guide-to-flexbox/ Here's my favorite guide on flexbox. :)

Keep it up!

Try working on your width for the element you gave a background-color of white, then the rest will work very well. And you also need to focus on the giving a border radius to the qr-image. Then lastly and most importantly, try following the style guide, It will guide you on which font weights to use, font-family to use and background-colors to focus on in that particular project. Other congratulations for the zeal of wanting to focus on frontend