Não consigo mudar o posicionamento das imagens no html/css

[guhhh25]

não consigo colocar as imagens no local desejado que é ao lado do titulo H2, as imagens ficam sempre abaixo da div 

<header class="menu-principal">
        <main>
        <div class="header-1">
            <div class="logo">

            
            <h2>WANTED</h2>
            
                
            </div><!--menu principal-->
            </div><!--header-1-->
            </div><!--logo-->
            
            <div class="redes-sociais">
                <ul>
                    
                    <li>
                        <a href=""><img src="imagens/instagram.png"></a>
                    </li>
                    <li>
                        <a href=""><img src="imagens/linkedin.png"></a>
                    </li>
                    <li>
                        <a href=""><img src="imagens/twitter.png"></a>
                    </li>
                    
                </ul>
            </div>
        </main>
    </header>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Dela Gothic One', cursive;;
}

body{
    width: 100%;
    height: 100%;
}



.logo{
    color:white;
    padding: 13px;
    width: 30%;
}

.menu-principal{
    background-color: rgb(0, 0, 0);
    height: 60px;
    width: 100%;
}

main{
    width: 980px;
    position: relative;
    margin: 0 auto;
}


.redes-sociais ul li{
    display:inline-block;
    width: 20%;
    float: right;
}

 

[_Vinny_]

Muda o position de header-1 para absolute e depois so alinhar o imagens das redes sociais dentro do bloco.