Hi,

What you have shown in your demonstration videos is a work of CSS position: fixed in different browsers and operating systems, which may differ from each other. In order to avoid content jumps during page scrolling, which will not look good, and may also affect the Google Page Speed google rating, the space under the sticky header is always reserved. This space is located in a different HTML element and because of that it cannot have the same background that you set for .main-page-wrapper.

Unfortunately, this behavior can’t be completely fixed via custom code or theme update, but you can control the background of sticky header reserved space to make it look more visually pleasing, for example by setting a background color to it which is similar to the color of the header.

Try to add following custom code to Global CSS area in theme settings:

.whb-header {
	background-color: #904530;
}

Kind Regards