how to add a Border on a container Div - html

Question

I'm trying to border a div that contains 4 fa-icons. Since I've set the parent div as Container, the border is automatically occupying large padding on the left & right sides horizontally. I've also tried nesting bootstrap grids, but it's not helping. Can anyone please help with this?
NOTE: Padding should not be greater than 1px on all sides and the div should exactly be in the center of the page.
HTML:
<div class="container" id="socialIcons">
<div class="row">
<div class="col-md-12">
<a href="https://www.google.com">
<i class="fab fa-linkedin fa-3x "></i>
</a>
<a href="https://www.google.com" target="_blank">
<i class="fab fa-youtube fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-instagram fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-github fa-3x"></i>
</a>
</div>
</div>
</div>
CSS:
#socialIcons {
position: relative;
text-align: center;
margin-top: 300px !important;
border: 1px solid white;
}
UPDATE: After applying Jeff's answer, this is closer to what I needed, but still has the automatic padding on the right side of the GitHub icon. Any idea why?

Answer 1

You could do something like this (when you swap your icons with my span's, it should give you the proper padding on top and bottom):
Codpen
Instead of hard coding text-align: center;, just add the class text-center through Bootstrap. Also, notice I added justify-content-center to the row.
<div class="container text-center" id="socialIcons">
<div class="row justify-content-center">
<div class="border">
<a href="https://www.google.com">
<span>google</span>
</a>
<a href="https://www.google.com">
<span>youtube</span>
</a>
<a href="https://www.google.com">
<span>fb</span>
</a>
<a href="https://www.google.com">
<span>twitter</span>
</a>
</div>
</div>
</div>
and CSS:
#socialIcons {
position: relative;
margin-top: 300px !important;
}
.border {
border: 1px solid black;
padding: 1px;
}

Answer 2

<div class="container" id="socialIcons">
<div class="row">
<div class="col-md-12" style="border: 1px solid white;">
<a href="https://www.google.com">
<i class="fab fa-linkedin fa-3x "></i>
</a>
<a href="https://www.google.com" target="_blank">
<i class="fab fa-youtube fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-instagram fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-github fa-3x"></i>
</a>
</div>
</div>
I hope above code will helps you

Answer 3

If your icons should be center-aligned - you don't need to use div element with container class. Just add a div wrapper with custom class, and add your styles on it.