How to give bottom spacing (distance) in a li

Question

Hello, guys. I’m new with development and I’m studying a little front-end (and loving hehe)

I’m, for student purposes, creating a simple store website. I created a menu at the top of this page, where I have a Nav with a div that supports my ul with the li’s that represent the site navigation options in this menu (header).

I made the options with ul li, but they are at the end of the menu, and I would like to bring them a little closer to my logo, which is a little above them, both centered on the menu.

I searched hard and found nothing to help me, or if I didn’t know how to apply.

jsfiddle

.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;
}

<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>

I’ve tried, in many ways, to do that. At first I thought I’d just give a bottom: n px in "options-princ".

Can anyone there help me? Was there something missing? If you have any tips on study material, or interesting articles, please feel free to tell me!

Answer 1

Hello

To do the test I put an example image in your logo.

To bring the logo menu closer, just change your css on menu-princ. you can decrease the padding-top and add a padding-bottom.

To approach further, you must remove the bottom: 60px; of . img-container

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

#li-princ {
    text-align: center;
}

.img-container{
    position: relative;
    left: 50%;
    margin-left: -50px;
}

.cabecalho nav h1 img {
    display: inline-block;
    height: 100px;
}

.menu-princ {
    padding-top: 1%;
    padding-left: 5%;
    padding-bottom: 5%;
}

.opcoes-princ {
}

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

}

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

<div class="cabecalho">

    <nav class="menu-princ">
        <h1><img src="http://digitaltroop.com.br/clientes/dressart/wp-content/uploads/2017/08/SampleLogo-820x421.png" 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>

Answer 2

As the friend said the mistake is here in this part:

.img-container{
    position: relative;
    left: 50%;
    margin-left: -50px; 
    bottom: 60px; 
}

withdraw the bottom: 60px;:

.img-container{
    position: relative;
    left: 50%;
    margin-left: -50px;  
}