Changing the Summary Block Meta Data Font

So I put in some custom CSS to style the fonts on the summary block and everything works except the meta data CSS. What's weird is that it works when I'm in the design panel; it changes the font styles like its supposed to, but when I view my site live on mobile, the only thing not working properly is the meta data font.

Desktop view works. Mobile view, the font is wrong. What am I doing wrong here?

This is my code:

//SUMMARY BLOCK META DATA FONT//
.summary-metadata-item a {
font-family: nunito sans;
font-weight: 800; 
font-size: 0.9em !important;
color: #444341;
font-style: normal;
letter-spacing: 0.11em;
text-transform: uppercase;
line-height: 1em;
}

My website is theblondeadventures.com

Can you share your website URL?

Yes! It's theblondeadventures.com

Ziggy, thank you, that worked! 🤠

And thanks for the website love! I've been working on it for a really long time and just launched last Friday. I'm happy with how it's turned out so far. 

Again, thanks for the help. That one little glitch in my code was really bothering me. 😅