Left-align CSS class not working on Home page buttons

[DeniseColbert]

[johnshaw1000]

This is difficult to fix. It's not clear what this should look like, generally buttons are centre-aligned. I did use CSS ID to gain some control over the text style, but I couldn't get the icons to align properly at all.

I've tried an alternative using an icon list, which I think formats more in line with what is wanted - but they're clearly not buttons.
Image attached for comparison.

[johnshaw1000]

I think this change achieves the styling requirements and the links work. @DeniseColbert please review.

[DeniseColbert]

Looks really good, John, thank you.

No hover focus may be a problem for keyboard-only users- design can look at this and advise.

Just curious, why doesn't the URL of each link show on hover?

[johnshaw1000]

The previous layout was achieved using <button html elements. This new layout is achieved using <a> (anchor) html elements, hopefully this is much closer to the vision for the homepage.
@DeniseColbert Please review and close this story if you're happy with this.

[DeniseColbert]

Love this, @johnshaw1000 thanks! Could you put a little distance between the icon and the text?

[johnshaw1000]

Done. Changed from 10px to 15px