Headline formatting in responsive design: Problem only on Mozilla Firefox

Hello!

I have been trying to make my website be responsive in mobile and tablet devices. I am using the Tesseract theme, if that matters at all. My problem is that when I view my website on mozilla firefox, the first word of my headline gets cut and a part of it appears in the next line. The thing is that in Chrome it works exactly as I want it to work.

My website is: http://www.beautiful-burger.com

Try to run it on Mozilla and make the window smaller, then try the same on Chrome and you will understand what I am talking about. The CSS for the headline resize I am using is this:

.headline-resize{

width:75%;
word-wrap:normal;
word-break: normal;
white-space: -moz-nowrap;

(some of it might be useless since I have been trying to fix the issue by messing around with word-wrap,word-break,etc. I also tried to put a
in the headline and use the white-space: -moz-nowrap; command to try to modify what appears on mozilla only. Am I missing something?

Thank you for your time