Help with menu spacing

Question

Well I’m trying to make a menu where you have, start / over / store and then a space and the "search" and another space and a login/ registration, but I’m not getting. Could someone help me?

<header>
<div class="logobg"><img src="images/logosecure.png"></div> 
<div class="menubarr">
<nav class="menubarr">
<ul>
<a href="#"><li>Inicio</li></a>
<a href="#"><li>Sobre</li></a>
<a href="#"><li>Loja</li></a>
<a href="#"><li>Contato</li></a>
</ul>
</nav>

<nav class="buscar">
<ul>
<a href="#"><li>Buscar</li></a>
</ul>
</nav>

<nav class="log">
<ul>
<a href="#"><li>Cadastrar</li></a>
<a href="#"><li>Login</li></a>
</ul>
</nav>
</div>
</header>

css:

*{margin:0;padding:0;}
header{
    width: 100%;
    height: auto;

}
section{
    width: 100%;
    height: 500px;
    background: #ccc;
}
footer{
    width: 100%;
    height: 50px;
    background: #000;
}
a{
    text-decoration: none;
}

.logobg{
    width: 1280px;
    margin:0 auto;
    background: #fff;
}

.logobg img{
    width: 100px; height: 100px;
}

 .menubarr{
    width: 1280px;
    margin:0 auto;
    background: #000;
}

.menubarr nav ul li{
    background: #000;
    color:#fff;
    display: inline-block;
    padding: 10px 20px;
    border-bottom: 2px solid #000;
}

 .menubarr nav ul li:hover{
    cursor: pointer;
    border-bottom: 2px solid #fff;
}

how are you at the moment :

Answer 1

Try to do this:

In a div that encompasses all <ul>, define a class name ('menu-block', in this case):

<div class='bloco-menu'>

<nav class="menubarr">
<ul>
<a href="#"><li>Inicio</li></a>
<a href="#"><li>Sobre</li></a>
<a href="#"><li>Loja</li></a>
<a href="#"><li>Contato</li></a>
</ul>
</nav>

<nav class="buscar">
<ul>
<a href="#"><li>Buscar</li></a>
</ul>
</nav>

<nav class="log">
<ul>
<a href="#"><li>Cadastrar</li></a>
<a href="#"><li>Login</li></a>
</ul>
</nav> 

</div>

After that, in CSS, do so:

   .bloco-menu{
    display: flex;
}

li{
    display: inline-flex;

}
ul{
    padding-left: 1px;
}

The display property: inline-block that will make them stand next to each other.

Obs: the padding of <ul> is optional, I put because the <ul>´s has a standard padding-left (left spacing) of approximately 5px, creating a blank space between each ul, if they are side by side.