loja fake

Quero subir a ul-li do menu, pra ficar mais proxima da imagem centralizada e um pouco mais distante do bottom.

HTML

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Loja Fake</title>
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/reset.css">
</head>

<body>

<header>

<div class="cabecalho">
    <nav class="menu-princ">
        <h1><img src="img/logo.jpg" alt="Logo da Loja Fake" class="img-container"></h1>

        <div id="li-princ">
            <ul class="opcoes-princ">
                <li><a href="#">Home</a></li>
                <li><a href="#">Produtos</a></li>
                <li><a href="#">Quem Somos</a></li>
                <li><a href="#">Conheça</a></li>
                <li><a href="#">Mídias Sociais</a></li>
            </ul>
        </div>
            

    </nav>
</div>


</header>

<main class="mainbg">
</main>

<footer>
</footer>

</body>


</html>

CSS

.cabecalho {
    background-color: #ffd22a;
    margin: 9px;
}

#li-princ {
    text-align: center;
}
.img-container{
    position: relative;
    left: 50%;
    margin-left: -50px; 
    bottom: 60px; 
}

.cabecalho nav h1 img {
    display: inline-block;
    height: 100px;
}
.menu-princ {
    padding-top: 5%;
    padding-left: 5%;
    
}

.opcoes-princ {
}

.cabecalho nav ul li {
    display: inline-block;
    bottom: 10%;

}

.mainbg {
    background-image: url("../img/bgnova2.jpg");
    height: 900px;
}