Chat App CSS Illustration

Hi guys,

This was my most difficult challenge in CSS I've done, I've tried my best to make everything look the same. I use a free version so measurements won't be exact.

I've got a few questions if someone can answer it :

I use Firefox Developer Edition to edit my code and everything looks great there. However, when I use Chrome for some reason in the mobile layout there is a huge amount of empty space I can't seem to get rid of. This problem doesn't occur with Firefox. I used an empty header as to me I couldn't really use anything to represent it. In the Desktop (1440px) version, is there a way to make the ::after background element sit more flush without creating whitespace? It looks odd in full screen and I'm sure there's a way to solve this issue. If I missed anything else, please be critical and let me know.

Thanks :)