Flexbox displays differently in each browser?

Hi Guys,

So I'm delving into the use of flexbox for the layout of a new site im working on and ive run into a problem with cross browser compatibility.

I have an element with two buttons in it. The element is a flexbox and therefore the two buttons are flex elements. Right.

In firefox my two buttons display as I want them to - with the "justify-content: center;" attribute applied to the parent <div> and they show up side by side with a little padding seperating them.

But in Chrome, even though I have used the -webkit- vendor prefix on the flex box and the elements, the buttons are displaying side by side but cheek to cheek as if its just ignored the padding.

Opon inspecting the elements it seams chrome is rendering the elements differently to firefox. The box model in chrome says that element's content is 166x55 but in firefox the same element's content is showing as 182x55

Before I stick the whole code in here do you guys think the problem is with flexbox or with the other element attributes applied?

Is it even possible that chrome is somehow reading different styles somewhere else that is effecting this? Surely the "content" of the element should be the same? I'm stumped!

Thanks guys!