Centered QR Code Card Using Flexbox

I noticed that the spacing on the words on the card were different from the desired result and mine (e.g. "I" in "Improve" is placed between the "s" and "k" in "skill" in the given design while mine is aligned with "k").

Is this just a result of possibly approaching this with a different method, or is it something that can be adjusted with padding/margins and font-size? I tried playing around with those two properties but would more often see the sentence be pushed to a new line rather than changing the alignment of the words.

Also, I noticed that when I implemented display:flex to the body, the html and body no longer took the browser size and took a smaller area than I wanted, so I had to set height:100% to remedy this. Is there any specific reason why the html/body seemed to only take 60-80% of the browser size unless specified?