Hi Felipe!
First of all, you've done a great job so far, don't let yourself get frustrated when doing something first time, it'll get better.
I see you're using display: flex; for your card element. Benefit of flex is that it makes content (qr code image, heading, text) responsive and force it to fit the surrounding element (card in this case). This means you don't have to specify your width and height of that card exclusively. Just set the max-width of the card and let flex do it's job.
In order to help flex do it's job for you, set elements inside your flexed card to be 100% of width (e.g. qr code image: width:100%) and set padding of the card to some value let's say 16px so you can get that fine white border line of 16px around all elements inside card.
Then, finally if needed add media queries and change max-width of card and font-size, font-weight of text accordingly.
You don't need to make containers for every single element, flex is doing that for you too, so you can get rid of image container and text containers (these are all block level elements, so they tend to take up 100% of parent (surrounding element's) width.
Also as @BernardusPH said, practice to use landmarks / semantic html and include css reset in your style.css file (you can read more of css reset HERE
Hope this helps,
have fun coding
