For some reason the links and hover effects aren’t showing when hovering directly over the text, but instead they only show when hovering near the very top of the text, say the very top of the letter ‘l’.

If anyone can help with this it would be hugely appreciated.

Remove the “width:100%: here:

@media only screen and (min-width: 1024px) {
.footer .copyright .footer-text {
    float: right;
    width: 100%;
    margin-right: 50px;
    margin-top: -20px;
   }
}

or replace it with width: auto;.

To add CSS:

• If you are using WordPress 4.7 or later, use the “Additional CSS” option in the customizer.
• If your theme has a custom CSS option, use that to add the CSS shown above.

Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.