During the late night hours I found the answer how to center the logo in the header.
In CSS I change the max-width to be the same as the width of the logo.
.site-header {
margin: 0 auto;
max-width: 588px;
}
(588px is the same width as the width of my logo)
