Why are my div's getting smaller?

Site URL: https://sparrow-piano-jh6p.squarespace.com/rewards

Hey there!

The password to the above site is villamadina. I used this code to make some coloured text boxes. 

<div id="overlay"><div class ="blue">

<h2><span class= "headeroverlay-white">my text here</span></h2>

</div>

<style>

.blue {

background: #005ba9;

padding: 10px;

text-align: center;

}

</style>

The "headeroverlay-white" is just "colour:white" in my custom css.

When I'm in squarespace it looks fine

but I just checked the site in incognito and found for some reason all the boxes are getting smaller?

How do I fix this? Thanks!