logo centered on nav, a little more help

Can you remove this entire block for now so I can see the original issue?
https://www.screencast.com/t/uvaCR8PkL

Also make sure you don't have any extra { or }

ok, that's removed. i wanted the centered logo and spacer to disappear below 1024.

Ok now add Tom's CSS back in:
https://generatepress.com/forums/topic/logo-centered-on-nav-a-little-more-help/#post-1175829

I'm not sure where you got the rest from?

done. the logo doesn't disappear.

Strange. Instead of the CSS in the article, can you try this?:

@media (min-width: 769px) {
	.inside-header {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	.header-widget {
		order: 10;
		overflow: visible;
	}

	.nav-float-right .header-widget {
		top: auto;
	}

	.nav-float-right .header-widget .widget {
		padding-bottom: 0;
	}

	.site-branding,
	.site-logo {
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		        transform: translateX(-50%);
		z-index: 200;
	}
	#mobile-header .mobile-bar-items {
		-webkit-box-ordinal-group: 5;
		-ms-flex-order: 4;
		order: 4;
		margin-left: auto;
	}
	#site-navigation {
		float: none;
		width: 100%;
	}

	.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.main-navigation .menu-item-separator {
		-webkit-box-flex: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
	}

	.main-navigation .menu-item-separator a {
		font-size: 0;
		background: transparent !important;
	}

	.slideout-navigation .menu-item-separator,
	.main-navigation.toggled .menu-item-separator{
		display: none !important;
	}
}

@media (max-width: 768px) {
	.inside-header>:not(:last-child):not(.main-navigation) {
		margin-bottom: 0;
        }
}

ok. i've swapped that out, but am still not seeing the logo disappear at 1024. the menu toggle is closed now tho :). all plugins are still disabled.

Try this:

@media (min-width: 769px) and (max-width: 1024px) {
    .site-logo {
        display: none;
    }
}

i put that at the bottom of the block... but check this out:
https://www.loom.com/share/a059ff91cf304477b9ceae6fddf78f07

The code is working, but the overlap you're seeing is happening before 1024px. Have you tried increasing that value?