Center logo and navigation in Bedford

I have tried all the CSS I found in other threads, but none are working quite right. One came close but it turned my menu into a hamburger. I'm just starting a new site, so I haven't made many changes to the original yet. I just want the logo top center, and the menu under that, centered. Should be pretty easy. Thank you!

https://chipmunk-manatee-w5ch.squarespace.compswd: Saborium789!

@dgsloves Add to Home > Design > Custom CSS

/* Desktop - Tablet */
@media screen and (min-width:641px) {
/* Change display table to flex */
.header-inner {
   display: -webkit-flex;
   -webkit-flex-direction: column;
   display: flex;
   flex-direction: column;
}
/* Center Logo */
div#siteTitleWrapper {
   width: 100% !important;
}
h1#siteTitle {
   text-align: center;
   width: 100% !important;
}
/* Center Navigation */
div#headerNav {
   text-align: center !important;
}
}

Thanks @tuanphan, however that turned my menu into hamburger style.

@dgsloves Can you take screenshot all code in Home > Design > Custom CSS?

@tuanphan That's the only code there. I just started the site.

@dgsloves Did you delete this code, and everything returned to normal?

@tuanphan Yes, when I delete it it goes back to normal.

@tuanphan Thanks for your help so far. Any luck figuring out why this turns my menu into mobile/hamburger format on desktop/laptop?

@dgsloves Try this

@media screen and (min-width:641px) {
#header #siteTitleWrapper, #header #siteTitle {
   width: 100%;
   text-align: center;
}
#header #headerNav {
   text-align: center;
   width: 100%;
}
.header-inner {display: table !important;}
}

@tuanphan Thanks for continuing to try but that did not work. It just moved the logo over a bit but not centered above the menu.