I’ve looked for a solution, but it’s hard to search for that CSS selector with other keywords due to the colon.

Pictured: https://prnt.sc/j2bvqn

I used the following filter in functions.php
add_filter('show_admin_bar', '__return_false');
The admin toolbar doesn’t load, but a CSS :before is creating a gap at the beginning of the page about 22px high. Inspect Element isn’t giving me any clues and can’t find it in the CSS or override it in my child theme. This isn’t a new feature, I’ve just always patched it up with something like `margin-top: -22px;
z-index: 99;` in the next div in the file. That probably isn’t best practice though since not all screens have the same resolution.

If someone could point me to the CSS governing this selector or what in WordPress is rendering it, I’d be most grateful.

Theme: Child Theme of TwentySixteen

@media screen and (min-width: 44.375em) {
	body:not(.custom-background-image):before,
	body:not(.custom-background-image):after {
		background: inherit;
		content: "";
		display: block;
		height: 21px;
		left: 0;
		position: fixed;
		width: 100%;
		z-index: 99;
	}

…..
which might be causing your problem.

there is also this style in the same section a few lines further down:

	.site {
		margin: 21px;
	}

I’ve overridden the theme’s @media screen z-index to -1 and .site’s margin to 0.

Thanks!