Formatting the "contact" link on the navigation bar

I wrote code to turn the "contact" link of my website into a colored button, and it works during the editing process, but the moment I save, it removes all of the changes that I've made. Here is the code that I've used,

.Header-nav.Header-nav--secondary 
a.Header-nav-item:last-of-type {
 background-color: #900020;
 padding: 10px 20px;
 border-radius: 3px;
 border-bottom: 1px solid #900020;
 color: white;
}

.Header-nav.Header-nav--secondary a.Header-nav-item:last-of-type:hover {
 background-color: #900020;
}

It's supposed to look like the photo I"ve enclosed, but it ends up only being white. Can someone figure out what's going on? I'm on the brine-template

If you want to visit the website, its robertchinnfoundation.squarespace.org and the password is open

@HelpMePlease looks good here

try

.Header-nav--secondary .Header-nav-inner a {
   background-color: #900020;
   padding: 10px 20px !important;
   border-radius: 3px;
   border-bottom: 1px solid #900020 !important;
   color: white;
}

@HelpMePlease looks good here

try

.Header-nav--secondary .Header-nav-inner a {
   background-color: #900020;
   padding: 10px 20px !important;
   border-radius: 3px;
   border-bottom: 1px solid #900020 !important;
   color: white;
}