Center logo issue

Hi, I am trying to center the logo for site in progress. So far I have used this code:

@media screen and (min-width:1120px) {
	.custom-logo-link {
		position:absolute;
		transform:translateX(-50%);
		left:50%;
	}	
}

which does center it but is also resulting in the logo dropping down to overlap the top half of the banner. It doesn't do this in the customizer but shows on the live site. What am I missing? Thank you