Mozilla and Webkit rendering page diferently

I am a premium member, trying to change the masthead.
What I want is to have the logo on the left and some text in the header centralised next to it.
I tried changing the “#masthead .hgroup #header-sidebar” to having a width of 100% which worked in safari and chrome, but in firefox the text is to the left of its container.
I believe the issue is with the “display: -webkit-box; display: box;” properties, because when I turn these off using the safari inspector the text appears as it does in firefox.
I feel this problem is too nuanced for me so I thought I’d ask the pros.
Many thanks,
Ollie