First off, you forgot to position your buttons, this is why your pseudo elements are overlapping each other. So add:
header .buttons a{
position: relative;
}
To center them, use justify-content
on the flex container:
header .buttons{
justify-content: center;
}
Second, are flexible boxes necessary here? Because your buttons have fixed sizes, they don't appear to need flexing, do they? Try resizing the window, make it smaller, and you'll see that they will shrink. To prevent that you can do flex: none;
, but then what's the point of using flex? :)
(without flex: http://jsfiddle.net/bXdGF)