Responsive hero section using Flexbox

I normally use the wildcard selector to set box-sizing: border-box on all my projects. I also include margin and padding resets here. Should I be putting these resets on the body tag selector instead?

Also I had a little trouble styling the font-awesome social icons. I ended up having to set a separate font-size for the twitter icon and to center them in the parent div with the border, I had to use transform: translateY(). It seemed to get the job done, but for some reason I don't like the solution. Any way I could have centered the icons with flexbox and sized them all consistently without having to make a separate font-size for twitter? Any other suggestions on how I can improve the code is welcome too!

Thank you!