Misaligned Profile Page

profile.page.html

<ion-content fullscreen="true" class="body">
    <div class="header">
        <img src="../../../../../assets/img/shapes/shape-c.png" alt="" srcset="">
        <div class="header-text">
            <h1>
                <ion-icon name="arrow-back" routerDirection="backward" class="back-btn" (click)="back()"></ion-icon>Profile
            </h1>
        </div>
    </div>

    <div class="my-card">
        <div class="avatar">
            <img src="../../../../../assets/img/avatar/2.jpg" alt="" srcset="">
        </div>
        <ion-card class="md">
            <ion-card-content>
                <div class="container">
                    <div class="d-flex flex-row content">
                        <div class="p-2">
                            <a routerLink="/settings">
                                <ion-icon name="settings"></ion-icon>
                            </a>
                        </div>
                        <div class="p-2">
                            <ion-icon name="create" class="right-span"></ion-icon>
                        </div>

                        <div class="info">
                            <h2 class="text-center">Deryl Banks</h2>
                            <p class="text-center">xyz@mail.com</p>
                        </div>
                    </div>

                    <div class="sub-menu">
                        <a routerLink="/account">
                            <ion-row class="mt-3">
                                <div class="left">
                                    <p>
                                        <ion-icon name="person" class="my-notif"></ion-icon> &nbsp; Account
                                    </p>
                                </div>
                                <div class="links">
                                    <ion-icon class="icons" name="chevron-forward-outline"></ion-icon>
                                </div>
                            </ion-row>
                        </a>

                        <a routerLink="/settings">
                            <ion-row class="mt-3">
                                <div class="left">
                                    <p>
                                        <ion-icon name="settings" class="my-notif"></ion-icon> &nbsp; Settings
                                    </p>
                                </div>
                                <div class="links">
                                    <ion-icon class="icons" name="chevron-forward-outline"></ion-icon>
                                </div>
                            </ion-row>
                        </a>

                        <a routerLink="/#">
                            <ion-row class="mt-3">
                                <div class="left">
                                    <p>
                                        <ion-icon name="settings" class="my-notif"></ion-icon> &nbsp; Settings
                                    </p>
                                </div>
                                <div class="links">
                                    <ion-icon class="icons" name="chevron-forward-outline"></ion-icon>
                                </div>
                            </ion-row>
                        </a>

                        <a routerLink="/notification">
                            <ion-row class="mt-3">
                                <div class="left">
                                    <p>
                                        <ion-icon name="notifications" class="my-notif"></ion-icon> &nbsp; Notifications
                                    </p>
                                </div>
                                <div class="links-2">
                                    <ion-icon class="icons" name="chevron-forward-outline"></ion-icon>
                                </div>
                            </ion-row>
                        </a>
                    </div>

                </div>
            </ion-card-content>
        </ion-card>
    </div>
</ion-content>

profile.page.scss

.body {
    margin: 0;
    padding: 0;
}

ion-content {
    // --offset-bottom: 100%;
    --overflow: hidden;
    overflow: auto;
    &::-webkit-scrollbar {
        display: none;
    }
}

a {
    text-decoration: none;
    color: #737373;
}

.header {
    position: relative;
    background-color: #0a0a0a;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.header-text {
    color: #fff;
    position: relative;
    top: -125px;
    padding: 0px 20px;
}

.my-card {
    position: absolute;
    width: 100%;
    top: 160px;
}

.avatar {
    position: relative;
    margin: 0px 90px;
    top: -65px;
    z-index: 999;
    // background-color: #2b2b2b;
    img {
        border-radius: 70px;
        border: #fff solid;
    }
}

ion-card {
    position: relative;
    z-index: 1;
    top: -135px;
    padding-bottom: 7em;
    border-radius: 20px;
}

ion-icon {
    font-size: 20px;
}

ion-row {
    // margin-left: -42px;
    p {
        font-weight: bold;
    }
}

.right-span {
    position: relative;
    left: 130px;
}

.info {
    position: relative;
    top: 50px;
    left: -1em;
    h2 {
        font-weight: 600;
    }
}

.sub-menu {
    position: relative;
    top: 5em;
}

.icons {
    margin-left: 1.5em;
}

.links {
    margin-left: 70px;
}

.links-2 {
    margin-left: 43px;
}

.my-notif {
    font-size: 15px;
}

.back-btn {
    color: #fff;
    position: relative;
    top: 4px;
    padding: 0px 0px;
    margin-right: 50px;
    font-size: 30px;
}