CSS Qual é a ordem de posicionamento para alinhar o menu dentro de div? HTML/CSS

[Impts]

Estou tentando alinhar um menu dentro do header, e dentro do header tem 2 div, qual a ordem de respeito das funções?

Deve-se alinhar o menu dentro do header utilizando só a div menuwrap, ou a div menu? ou o alinhamento se da dentro do header?

 

<header>
<div class="menuwrap">
<div class="menu">
<nav>
  <ul>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
  </ul>
</nav>
</div>
</div>
</header>

 

body {margin:  0; padding: 0;}

header {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: space-between; 
	height: 5vh; 
	background: red;

}

.menuwrap {}
.menu {}
.menu ul {}
.menu li{display: inline-block;}

[washalbano]

Olá!
Pode depender de como deve ser esse alinhamento.
Mas, inicialmente, para se alinhar algo dentro de alguma tag, deve-se estilizar a tag.
Logo, se pretende-se alinhar algo dentro da tag <header>, a tag <header> precisa receber alguma estilização neste sentido.
 

[Impts]

Outra dúvida, como conserto o alinhamento quando coloco uma imagem dentro do <li>? Coloquei o logo, e as demais opções desceram, não ficaram alinhadas com a imagem.

 

 

header {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center; 
	background: floralwhite;
	height: 5vh; 
	width: 100%;
	backdrop-filter: blur(7px);

}

.menuwrap {}
.menu {}
.menu ul {}
.menu li{display: inline-block; padding: 0vh 1.5vh;}

.link-logo {
    background: url('logo.png');
    background-repeat: no-repeat;
    display: inline-block; 
    background-size: 3vh;
    height: 5vh;
    width: 3.5vh;
}

 

 

<header>
<div class="menuwrap">
<div class="menu">
<nav>
  <ul>
    <li><a href="" class="link-logo"></a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
    <li><a href="">Produto</a></li>
  </ul>
</nav>
</div>
</div>
</header>

[Luiz Paulo Escobar]

Olá

 

 

body {margin:  0; padding: 0;}
.menuwrap {
	height: 50px; 
	background: red;
  width: 100%;
}
.menu {
  display: flex;
  display: flex; 
	flex-wrap: wrap; 
	justify-content: space-between;
  margin: 0 auto;
  height: 100%;
  max-width: 1300px;
}

nav {
  height: 100%;
  flex-basis: calc(100% - 100px);
  display: flex;
  text-align: center;
  margin: 0 auto;
  justify-content: center;
  height: 100%;
}
.menu ul {
  flex-basis: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu li{
  list-style-type:none
}
.menu li a {
  background-color: #ebebeb;
  border-radius: 5px;
  padding: 5px 10px;
  text-decoration: none;
  color: #000;
  font-size: 1.1em;
  transition: all 500ms ease;
}

.menu li a:hover {
  background-color: red;
  color: #FFF;
  border: #FFF 3px solid;
}