CSS animation loader moving - html

Question

Update: It appears that a scrollbar is appearing for half a second, which pushes the animation to the left. Then when the scrollbar disappears, the animation shifts back into the middle. What is going on? How can I fix it?
I tried adding this line of code to my PHP file. It should be the very first thing that loads. But, the scrollbar still appears for half a second.
echo " <style> * {overflow: hidden;} </style> ";
I have a loading screen. I am using CSS to create the animation. During the loading, the animation works well but it doesn't stay perfectly in its spot. After about 2 seconds, the animation's location makes a very small change in position. How can I fix it so that the animation remains perfectly fixed in the center of the screen?
#loading_screen {
background: #add9e4;
background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background-color: #f7fbfc;
}
.loader_animation {
border: 16px solid lightgrey;
border-top: 16px solid blue;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="loading_screen" style="overflow:hidden; position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; z-index:999999;">
<div style="display:flex; justify-content:center; align-items:center; width:100%; height:100%;">
<div class="loader_animation"></div>
</div>
</div>