Okay, since what I've added was a mess, hopefully this time I did better job.
In the interest of maintaining as much of the code you have and trying to account for responsive changes, this is what I would do:
.socialelements in another
div, give a class that makes sense. Here I've called it
.icona display value of
inline-block, and set a relative width (20% is approximate to what you have here)
.nav-groupin this case, with a width of 80%). Set its position to
absolute, and align accordingly.
This solution assumes you want the height of the header to scale proportionally as the screen size changes, preserving the dimensions of the logo/icon/image on the left.
However, you are going to run into some issues with this design on smaller screens - you will see what I mean once you get to the breakpoint in your CSS. There are a lot of different ways to address the issue, depending on what you want to happen at that width and smaller.