почему span element формируется не отоносительно текста?

.page {
    width: 100%;
    height: 100vh;
    background-color: #080808;
}

.type_text {
    text-transform: uppercase;
    font-family: 'VelaSans-Bold';
    font-size: 55px;
    color: #fff;
}

.line_left {
    border-radius: 80px;
    display: block;
    height: 15%;
    width: 2%;
    background-color: #FF0000;
    margin-right: 20px;
    margin-left: 320px;
    opacity: 1;
    flex: none;
}

.cards {
    display: flex;
}

.type_personal {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
}

.name {
    font-family: 'VelaSans-Bold';
    color: #fff;
    font-size: 35px;
    margin-top: 30px;
    margin-left: 30px;
    width: 0;
}
.personal {
    display: flex;
    flex-flow: row wrap;
    align-content: space-between;
    justify-content: space-between;
    width: 100%;
}
.person {
    width: 50%;
    display: flex;
    margin-top: 80px;
}
.social {
    margin-top: 80px;
}

.skin {
    margin-left: 130px;
}

.vk {
    margin-right: 30px;
}

<div class="page">
        <div class="cards">
            <div class="type_personal">
                <span class="line_left"></span>
                <p class="type_text">OWNER</p>
            </div>
            <div class="personal">
                <div class="person">
                    <img src="./assets/img/skin1.png" alt="" class="skin">
                    <p class="name">softrelax</p>
                    <div class="social">
                        <img src="./assets/img/vk.png" alt="" class="vk">
                        <img src="./assets/img/discord.png" alt="" class="discord">
                    </div>
                </div>
                <div class="person">
                    <img src="./assets/img/skin2.png" alt="" class="skin">
                    <p class="name">softmethod</p>
                    <div class="social">
                        <img src="./assets/img/vk.png" alt="" class="vk">
                        <img src="./assets/img/discord.png" alt="" class="discord">
                    </div>    
                </div>
                <div class="person">
                    <img src="./assets/img/skin2.png" alt="" class="skin">
                    <p class="name">softmethod</p>
                    <div class="social">
                        <img src="./assets/img/vk.png" alt="" class="vk">
                        <img src="./assets/img/discord.png" alt="" class="discord">
                    </div>    
                </div>
                <div class="person">
                    <img src="./assets/img/skin2.png" alt="" class="skin">
                    <p class="name">softmethod</p>
                    <div class="social">
                        <img src="./assets/img/vk.png" alt="" class="vk">
                        <img src="./assets/img/discord.png" alt="" class="discord">
                    </div>    
                </div>
                <div class="person">
                    <img src="./assets/img/skin2.png" alt="" class="skin">
                    <p class="name">softmethod</p>
                    <div class="social">
                        <img src="./assets/img/vk.png" alt="" class="vk">
                        <img src="./assets/img/discord.png" alt="" class="discord">
                    </div>    
                </div>
                <div class="person">
                    <img src="./assets/img/skin2.png" alt="" class="skin">
                    <p class="name">softmethod</p>
                    <div class="social">
                        <img src="./assets/img/vk.png" alt="" class="vk">
                        <img src="./assets/img/discord.png" alt="" class="discord">
                    </div>    
                </div>
                <div class="person">
                    <img src="./assets/img/skin2.png" alt="" class="skin">
                    <p class="name">softmethod</p>
                    <div class="social">
                        <img src="./assets/img/vk.png" alt="" class="vk">
                        <img src="./assets/img/discord.png" alt="" class="discord">
                    </div>    
                </div>
                <div class="person">
                    <img src="./assets/img/skin2.png" alt="" class="skin">
                    <p class="name">softmethod</p>
                    <div class="social">
                        <img src="./assets/img/vk.png" alt="" class="vk">
                        <img src="./assets/img/discord.png" alt="" class="discord">
                    </div>    
                </div>
            </div>
        </div>
    </div>