I'm having to add css twice for changes to take effect

Hi there,

you have some extra } in the CSS above that are not necessary and breaking the CSS.

The only time a CSS rule will end in:

   }
}

Is if it is starts with @media.

Any CSS rules you have outside the @media must finish in single bracket.
The three rules that are broken are ( i have commented what to remove ):

.main-navigation .main-nav ul li.nav-button:hover a {
    background-color: #236cca;
    border: 2px solid #236cca;
    color: #ffffff;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, .1);
}
} /* Remove this bracket */

/*Buttons**/
a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
    background-color: #ff2500;
    color: #ffffff;
    line-height: 35px;
    padding: 10px 45px 10px 45px;
    border-radius: 3px;
    margin-top: 20px;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, .1);
}
} /* Remove this bracket */

a.button,
a.button:hover,
a.wp-block-button__link:hover(.has-background) {
    background-color: #236cca;
    color: #ffffff;
    line-height: 35px;
    padding: 10px 45px 10px 45px;
    border-radius: 3px;
    margin-top: 20px;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, .1);
}
} /* Remove this bracket */

Ahh Gotcha!

All fixed.

Thanks for your time!

You're welcome