Сдвинуть текст в CSS в grid

Question

Обьясните пожулайста как сдвинуть текст "Увійти" в стандартную правую часть сайта, как изображено стрелками на фото. Это grid контейнер, но и так и так старался сдвинуть - все ни как... Еще зеленый в этом (:

.header {
    margin: 20px 30px 0px 30px;
    grid-area: header;
    padding: 15px;
    padding-right: 400px;
    background: url(../Images/header.jpg);
    border-radius: 50px;
    display: grid;
    align-items: center;
    grid-template: 1fr / 1fr minmax(auto, 300px) minmax(auto, 1100px) 1fr;
    padding-bottom: 5px;

}
.header_logo {

}
.header_logo_photo {
    width: 100px;
    height: 100px;
    margin-left: 85px;
    border-radius: 50%;
    background-color: #fff;
    grid-column: 2 / 3;
}

.header_menu {
    grid-column: 3 / 4;
}
.header_list {
    display: grid;
    grid-auto-flow: column;
    justify-items: end;


}
.header_list li {
}
.header_link {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;

}
/*Ютуб*/
.header_link_youtube {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    background-color: #ed1831;
    padding: 5px 5px;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 5px;


}
.header_link_youtube:hover {
    background-color: #c20808;
    transition: 0.5s;
}
/*Фейсбук*/
.header_link_facebook {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    background-color: #403ec2;
    padding: 5px 5px;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 5px;


}
.header_link_facebook:hover {
    background-color: #1a0ac7;
    transition: 0.5s;
}
/*Інстаграм*/
.header_link_instagram {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    background-color: #e5073b;
    padding: 5px 5px;
    justify-self: start;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 5px;
}
.header_link_instagram:hover {
    background-color: #ad0028;
    transition: 0.5s;
}
/*Пошмарк*/
.header_link_posh {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    background-color: #660b0b;
    padding: 5px 5px;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 5px;
}
.header_link_posh:hover {
    background-color: #990527;
    transition: 0.5s;
}
.header_link_enter {
    
    align-items: center;


    font-size: 18px;
    color: #fff;
    text-transform: uppercase;

<body>
    <!-- Оболочка (Grid-контейнер) -->
    <div class="wrapper">       
        <header class="header">
                <a href="" class="header_logo"> <img class="header_logo_photo" src="Images/olena.png"> </a>     <!-- Власне саме лого -->
            <nav class="header_menu">       <!-- Меню сайта -->
                <ul class="header_list">    
                    <li><a href="https://www.youtube.com/user/OlenaKozachenko" class="header_link_youtube" target="_blank">Youtube</a></li>

                    <li><a href="https://www.facebook.com/lena.kozachenko.3" class="header_link_facebook" target="_blank">Facebook</a></li>

                    <li><a href="https://www.instagram.com/_olenakozachenko_/" class="header_link_instagram" target="_blank">Instagram</a></li>

                    <li><a href="https://poshmark.com/closet/olena_29?fbclid=IwAR0kokkzb85FIExxq9byGbbf5RS-Rvb5LOQpRXVm4YH0cm88ixvyTMilnvs" class="header_link_posh" target="_blank">Poshmark</a></li>
                    <p> <a align="right" href="" class="header_link_enter" target="_blank">Увійти</a> </p>
                </ul>

            </nav>

        </header>

БЛОГ НА HUSL

Сдвинуть текст в CSS в grid

Ответы (0 шт):