Center align logo with Bedford 7.0 template

Site URL: http://www.wouldntitbelovely.com

I'm looking to center align the logo in the header of my site using the Bedford 7.0 template. I'd like the navigation to be stacked underneath the logo, also center aligned. Is this possible? 

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
.header-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
div#logoWrapper {
    width: 100% !important;
    text-align: center;
}
h1#logoImage {
    margin: 0 auto;
}
div#headerNav {
    text-align: center !important;
}
}

@tuanphan thank you! is there a way to make this happen without forcing the navigation to a hamburger nav on desktop? I'd like to have the navigation center aligned underneath the logo.