Why doesn't the text adapt?

Question

css

I want to adapt the text: I specified the value in em. For some reason, media queries also do not work - when the screen is reduced, the cap moves off.
Code attached: Сodepen .

Answer 1

Where does the media not work? Everything is ok in chrome.
The hat is moving, because the mail is an inline block, and the name is flex. Block sizes are not specified.