How to keep the logo always centered?

Kind of a tough one, as centered items move depending on if other items are on the same line.

One thing you can do is make the header widget position:absolute, which will make it no visible to the centered logo.

For example:

@media (min-width: 769px) {
    .inside-header {
        position: relative;
    }

    .header-widget {
        position: absolute;
        right: 0;
    }
}