Button Hover Underline Weird Spacing

Hi there,

I've added in a hover underline code to animate the buttons on the home page and it works well except for the alignment.

I can't seem to center the text of the buttons. Can anyone help me?
I'll add the code below

https://dragonfly-violet-43y8.squarespace.com/home-1

PW: 1234

section[data-section-id="6374309d76f4ab38edc194bb"] .sqs-block-button-element {
  font-size: 4rem !important;
  text-align: left !important;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  position: relative;     
  height: 60px;     
  line-height: 60px;
  text-align: left;
  transition: 0.5s;
  cursor: pointer;    
  -webkit-transition: 0.5s; 
}  

section[data-section-id="6374309d76f4ab38edc194bb"] .sqs-block-button-element {
  background-color: transparent !important;     
  border-color: transparent!important;
  color: #f2f2f2 !important; 
}  

section[data-section-id="6374309d76f4ab38edc194bb"] .sqs-block-button-element:hover:before {
  transition-delay: .2s; 
}  

section[data-section-id="6374309d76f4ab38edc194bb"] .sqs-block-button-element:before {
  width: 0%;     
  height: 100%;     
  z-index: 3;     
  content: '';     
  position: absolute;    
  bottom: -1px;    
  left: 0;  
  box-sizing: border-box;     transition: .2s; 
}  

section[data-section-id="6374309d76f4ab38edc194bb"] .sqs-block-button-element:hover:before {
  width: 100% !important;
  transition: .7s;
}  

section[data-section-id="6374309d76f4ab38edc194bb"] .sqs-block-button-element:before { 
  border-bottom: 3px solid #f2f2f2 !important; }

Thanks!