No matter what image I use it distorts it

I’m trying to get an image that will display on social media (esp. twitter) when my homepage url is shared. I’ve tried images of all sizes to try to get the entire image to show instead of an enlarged section of the middle.
This is the image I want to use.

https://advocacyforfairnessinsports.org/wp-content/uploads/2019/10/advocacy-for-fairness-in-sports-wh-800×450-e1570127137208.jpg

I’ve tried resizing to see if that would help going from 600 x 315 to 1200 x 630 and several sizes in between but no matter what the image size is, it displays at the center:

“RNESS IN” with just a tip of the “S” on the right with a tiny piece of the basketball and a tip of the “y” on the left.

Normally images I creat for twitter cards for my pages are 800 x 450 or 500 and those images display properly, and that’s how I started out for this image, Do I need to do an image with lots of white space and the actual image downsided to the size of the text it’s showing? I’m running out of ideas?

The page I need help with: [log in to see the link]