一些元素未在 HTML 中排列

Question

我希望“卡片”下的这 3 个彩色矩形与整个“卡片”对齐。现在他们的位置稍微偏右。我真的不知道我搞砸了什么。我搜索了很多东西但没有找到解决方法，这就是我来这里的原因。我希望有人能帮助我，因为这件事让我很头疼。

@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

我想你想要这个

#socialLinks {
padding: 0;
display: flex;

}

Answer 2

只需将 padding:0 添加到社交链接列表

一些元素未在 HTML 中排列

Some elements not lining up in HTML

html

css

element