🪲[Bug]: Misaligned Hover Underline on Footer Social Media Icons

[malshi-kavindya]

Describe the bug
In the footer section under "Follow us on", when hovering over the social media icons (e.g., Facebook), an orange underline appears. However, the underline is misaligned and does not sit properly beneath the icons, creating a visual inconsistency.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://akshitagupta15june.github.io/PetMe/
2. Scroll down to the footer section
3. Hover over the social media icons under "Follow us on"
4. Observe the orange underline — it appears shifted and not centered with the icons

Expected behavior
The orange underline should be perfectly centered and align

Desktop (please complete the following information):

• OS: windows 11
• Browser : chrome
• Version : 124.0.6367.208

Additional context
This issue may be due to the use of ::after or border-bottom styling that doesn't align well with the icon's width. I'd be happy to work on a fix for this if the issue is valid and unassigned.

[11Warrior]

Working on the issue !

[11Warrior]

................

just put left margin of 1 on svg element and left margin of 0 on to get underline just below the center