How to freeze right sidebar properly?

Hi

I want a frozen sidebar against the right edge of the page with a width that matches the off-canvas menu (@media min-width: 801px).

See example here: https://staging.cingularity.tv/cingularity-esports-broadcasting-fortnite/#more-249

It works fairly well, but it first renders in the default way before jumping to my custom width when the page is loading. I've put the css up near the top ( in Customizer > Additional CSS ) but is there a better way?

Here's my css code:

/* frozen sidebar */
#right-sidebar .grid-25 {
float: none;
width:340px;
}
@media (min-width: 1025px) {
#right-sidebar .grid-25 {
    float: none;
	}}
@media screen and (min-width: 801px) {
#right-sidebar .inside-right-sidebar {position: fixed;
		right: 0;
		top: 0;
		z-index: -1;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	   padding-top: 80px;
	}
.separate-containers .inside-right-sidebar {
    margin-top: 0;
}
}