Site URL: https://www.camelliaco.com.au/home

I am styling a summary block (grid) and would like to remove the arrow from the 'read more' button. After reading previous posts I have now sucessfully done this, using the following code. However, when I add this code, the button sits off-center. It should be center-justified. Can anyone figure out why this would be?

I have uploaded an image of the page with and without the arrow hidden.
Page: https://www.camelliaco.com.au/home
Page password is: home

.sqs-gallery-design-autogrid .summary-read-more-link {font-family: 'Red Hat Mono', monospace;
  font-size: 0.8rem !important;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: underline;
  text-align: center;
}

.summary-read-more-link {
  visibility: hidden;
}
.summary-read-more-link:before {
  content: 'Read More';
  visibility: visible;
}

Thanks - I have a few things that are a work in progress on this page so I'll get to that later. This sorted my issue with the off-centre text.