Bootstrap Social Buttons Background Color and Hovering Issue

I am using Bootstrap to create the social buttons for Facebook and LinkedIn. When I set the background color to white for the buttons, it doesn't properly cover the button. The white background starts to cover outside the social buttons. It looks like this:

I set it to white because if I don't then the letters become the same color as the grey background.

This is the code that I have set up in CSS:

.social a {
  font-size: 4.5em;
  padding: 1rem;
}

.fa-facebook {
  background-color: white;
  color: #3b5998;
}

.fa-linkedin {
  background-color: white;
  color: #0e76a8;
}

.fa-facebook:hover, .fa-linkedin:hover {
  color: #d5d5d5;
}

And this is the code I have in HTML:

<div class="container-fluid padding">
    <div style="padding: 0px; margin: 0px;" class="row text-center padding">
        <div style="padding: 0px; margin: 0px;"  class="col-12 social">
            <a href="https://www.facebook.com/westernUBT/"><i class="fab fa-facebook"></i></a>
            <a href="https://www.linkedin.com/company/western-hasp/"><i class="fab fa-linkedin"></i></a>
        </div>
    </div>
</div>

Also when I hover over the buttons, it seems to detect the click from outside the social media icon area. Like if I hover around the grey area close to social media icons, it seems to detect it and I don't know why.