Unable to center monospace text on mobile

Site URL: https://bold-and-badass.squarespace.com/

Hi,

I'm trying to centre all text & buttons on mobile for this website:

https://bold-and-badass.squarespace.com/

Here is the code I've used:
 

//centre all text on mobile//
@media only screen and (max-width: 480px) {
monospace, monospace, p, H1, H2, H3 { text-align: center !important; }}

//centre buttons on mobile//
@media(max-width: 1220px) {
.sqs-block-button .sqs-block-button-container--left {
    text-align: center;
  }
}


However, when I use this code, all monospace text that's left aligned on desktop/laptop, doesn't appear centered on mobile. 

This issue occurs on all website pages.

Is there a workaround/fix for this?

Screenshot examples attached.

I've also tried adding '*' for all text in the css above, but that caused issues with the placement of some images blocks and shifted some images over to the center of the page with the right side of some images cutting off.

I don't think there is an element called "monospace". Try this code instead:

pre code { 
display:block !important;
text-align: center !important;   
}

oh fabulous, that's worked perfectly, thank you so much!