Center menu over logo properly

Hello,

I’ve actually centered this but the code makes my menu and or logo jump left/right to original positions with the code I am using. I think I fixed it a bit, but the nav menu jumps up and then down when page renders. Can it be made to not jump all over page?

Is there different code I could try? Fix this code?

For example, click on company, and another page. See how header and menu moves up and down? This is startling…

Any help is appreciated. Thanks.

My current code:

.navbar-header.responsive-logo {
text-align: center;
width: 100%;
}

a.navbar-brand {
margin: auto;
float: none;
}

/*centers menu*/
@media screen and (min-width: 767px) {
nav#site-navigation {
float: none;
margin: 0 auto;
display: table !important;
}
}

Site Webpage