Some elements not lining up in HTML - html

Question

I expect these 3 colored rectangles under the "card" to line up with the whole "card". Right now they are positioned slightly to the right. I don't really know what did I mess up. I searched a lot of stuff but didn't find a fix, that's why I'm here. I hope that someone can help me because this thing is giving me a headache.
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap%27)');
* {
margin: 0;
}
li {
list-style: none;
}
#bCard {
width: 460px;
height: 350px;
left: 50%;
transform: translate(-50%);
position: absolute;
}
#bCardTop {
background: rgb(61, 61, 61);
width: 460px;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
}
#tpdne1 {
width: 60px;
height: 60px;
border-radius: 50%;
}
#bCardTopProfession {
color: white;
margin-left: 6px;
font-family: poppins;
font-size: 24px;
font-weight: 500;
justify-content: center;
}
#bCardBottom {
background: rgb(43, 43, 43);
width: 460px;
height: 175px;
}
#socialLinks {
display: inline-flex;
}
#socialLinks li {
width: 153.33px;
height: 100px;
}
/* add before and after later */
#test1 {
background: tomato;
}
#test2 {
background: lime;
}
#test3 {
background: cyan;
}
<div id="bCard">
<div id="bCardTop">
<img id="tpdne1" src="https://i.ibb.co/cx9F4K1/tpdne-1.jpg" alt="thispersondoesnotexist">
<!-- change src back to ./img/tpdne_1.jpg later -->
<div id="bCardTopProfession">
Professional Idiot
</div>
</div>
<div id="bCardBottom">
</div>
<ul id="socialLinks">
<li id="test1">
<a href="#">
</a>
</li>
<li id="test2">
<a href="#">
</a>
</li>
<li id="test3">
<a href="#">
</a>
</li>
</ul>
</div>

Answer 1

I think you want this
#socialLinks {
padding: 0;
display: flex;
}

Answer 2

Just add a padding:0 to the socialLinks list