Your code is a good start. One way you can center both the image and the text is to wrap the two elements in a flex box div, and set this div to make the items in the center.
It appears you have the correct font for the title, but not for the paragraphs or the buttons. If you set the font of a parent element (the <body> or container), then all elements within it will have its font. This is an easy fix, as all you need to do is put font-family: "Figtree", sans-serif; that you have in the title style into .container {}.
Another thing that can help your development experience is to make a separate CSS file. This will make your CSS look more readable, and easier for you to change in the future. If you are using Visual Studio Code to edit your files, there are extensions such as Prettify that will automatically format the tabs which will make your code more readable while saving you time.
Hope this helps, and feel free to let me know if you have any questions.
-The QR code does not center properly on my screen, and the gray border should only be added on large screens. I recommend removing the gray border, and add it last when everything else works
-The text overflows from the card on my screen. This is because you have a fixed height set on the QR Card. Removing this will cause the height of the card to always fill all the elements inside
-Add the 'text-align:center' style to your title like you did inside the <p> tag
-The background colors do not match exactly. You can get the colors the designer used inside of the style-guide.md, and apply it to your design
-The text color and font weight can be changed for the paragraph text.
-A cool trick is that you can add draggable="false" inside your <img /> tag to prevent the user from dragging it
EX:
<img draggable="false" src="..." />
Overall, removing the fixed height of your card element will be the biggest improvement.
