Как совместить два отдельных класса <ul>рядом друг с другом в navbar?

Question

Мне нужны два отдельных списка в моем NavBar, оба выровнены по правому краю изображения компании, с одним <li> в центре.Я попытался выровнять оба поля правильно и использовать поля, но при изменении размера браузера у меня изменился внешний вид (в худшем случае).

Я ошибаюсь?Я приложил свои HTML и CSS (я использую загрузчик) ниже.Как сделать так, чтобы моя навигационная панель отображалась как изображение?

/* Navigation */
#menu.navbar-default {
	background-color: #fff;
	border-color: rgba(231, 231, 231, 0);
	height: 65px;
}

.navbarimg {
	position: absolute;
	left: 15%;
	margin-top: -15px;
}

.nav-stacked {
	font-size: 16px;
    line-height: 26px;
    letter-spacing: .5px;
	color: #333333;
}

.nav-stacked li:hover {
	background-color: none;
}

.nielsennav {
	font-family: 'Knockout','Open sans', sans-serif;	
	text-transform: uppercase;
	color: #000;
}

<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header col-lg-12 col-md-12"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="img/navbargrey.png" alt="Nielsen" width="45" height="65" class="navbarimg"> </a>
      <ul class="nav navbar-nav navbar-right">
		
        <li><a href="joincreate.html">Sign Up</a></li>
        <li><a href="#">Login</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-center">		  
        <li><a href="welcomenz.html">Home</a></li>
        <li><a href="howitworks.html">How it works</a></li>
        <li class="active"><a href="joincreate.html">Join</a></li>
      </ul>
    </div>
  </div>
</nav>

Чего я хочу достичь:

Answer 1

Я изменил абсолютную позицию на относительную позицию и создал стили для nav и li со встроенным блоком, чтобы выровнять его с добавлением некоторых стилей позиционирования.Надеюсь, это поможет.

/* Navigation */

.nav{
display:inline-block;
position: relative;
left: 20%;
margin-top: -15px;
}
.nav-right{
right:10%;
}
li{
display:inline-block;

}

#menu.navbar-default {
	background-color: #fff;
	border-color: rgba(231, 231, 231, 0);
	height: 65px;
}

.navbarimg {
	position: relative;
	left: 15%;
	margin-top: -15px;
}

.nav-stacked {
	font-size: 16px;
    line-height: 26px;
    letter-spacing: .5px;
	color: #333333;
}

.nav-stacked li:hover {
	background-color: none;
}

.nielsennav {
	font-family: 'Knockout','Open sans', sans-serif;	
	text-transform: uppercase;
	color: #000;
}

<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header col-lg-12 col-md-12"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="img/navbargrey.png" alt="Nielsen" width="45" height="65" class="navbarimg"> </a>
      <ul class="nav navbar-nav navbar-right">
		
        <li><a href="joincreate.html">Sign Up</a></li>
        <li><a href="#">Login</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-center">		  
        <li><a href="welcomenz.html">Home</a></li>
        <li><a href="howitworks.html">How it works</a></li>
        <li class="active"><a href="joincreate.html">Join</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 2

Надеюсь, это поможет.спасибо

/* Navigation 
#menu.navbar-default {
	background-color: #fff;
	border-color: rgba(231, 231, 231, 0);
	height: 65px;
}
/* 
.navbarimg {
	position: absolute;
	left: 15%;
	margin-top: -15px;
}
*/
.nav-stacked {
	font-size: 16px;
    line-height: 26px;
    letter-spacing: .5px;
	color: #333333;
}

.nav-stacked li:hover {
	background-color: none;
}

.nielsennav {
	font-family: 'Knockout','Open sans', sans-serif;	
	text-transform: uppercase;
	color: #000;
}

.navbar-header{display:flex}
.nav.navbar-nav{flex-direction: row;}

a.navbar-brand{
  padding-top:0;
  padding-bottom: 0;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header col-lg-12 col-md-12"> 
    <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="img/navbargrey.png" alt="Nielsen" width="45" height="65" class="navbarimg"> </a>
      <ul class="nav navbar-nav navbar-right">
		
        <li><a href="joincreate.html">Sign Up</a></li>
        <li><a href="#">Login</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-center ">		  
        <li><a href="welcomenz.html">Home</a></li>
        <li><a href="howitworks.html">How it works</a></li>
        <li class="active"><a href="joincreate.html">Join</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 3

Это потому, что абсолютная позиция в классе navbarimg.

Удалить position: absolute; из navbarimg

/* Navigation */
#menu.navbar-default {
	background-color: #fff;
	border-color: rgba(231, 231, 231, 0);
	height: 65px;
}

.navbarimg {
	left: 15%;
	margin-top: -15px;
}

.nav-stacked {
	font-size: 16px;
    line-height: 26px;
    letter-spacing: .5px;
	color: #333333;
}

.nav-stacked li:hover {
	background-color: none;
}

.nielsennav {
	font-family: 'Knockout','Open sans', sans-serif;	
	text-transform: uppercase;
	color: #000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header col-lg-12 col-md-12"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="img/navbargrey.png" alt="Nielsen" width="45" height="65" class="navbarimg"> </a>
      <ul class="nav navbar-nav navbar-right">
		
        <li><a href="joincreate.html">Sign Up</a></li>
        <li><a href="#">Login</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-center">		  
        <li><a href="welcomenz.html">Home</a></li>
        <li><a href="howitworks.html">How it works</a></li>
        <li class="active"><a href="joincreate.html">Join</a></li>
      </ul>
    </div>
  </div>
</nav>