Bonjour, j'ai un soucis.
J'ai fait mon header, jusque la tout va bien.
Seulement, le menu (#menu) je n'arrive pas à le centrer.
Je veux vraiment qu'il soit centrer et non pas décalé par un margin en px.
J'ai essayé :
text-align: center;
et
margin-left: auto;
margin-right: auto;

Mais rien a faire...
Merci d'avance pour votre aide.

<header class="container-fluid">
	<h1>Logo name</h1>

	<div id="menu">
		<a href="#">Accueil</a>
		<a href="#">Forum</a>
		<a href="#">Trier par&nbsp;&nbsp;<i class="fa fa-chevron-down chevron_menu" aria-hidden="true"></i></a>
	</div>

	<form action="#" method="GET">
		<input type="search" name="search" placeholder="Recherche">&nbsp;&nbsp;
		<button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
	</form>
</header>

header {
	padding-top: 30px;
	padding-bottom: 20px;
}

header h1 {
	color: #ffffff;
	font-family: 'Lobster', cursive;
	display: inline-block;
}

header form {
	display: inline-block;
	float: right;
}

header form input[type="search"]
{
	background-color: #222933;
	border: 3px solid #29303a;
	color: #ADAEAD;
	padding: 5px;
	width: 250px;
}

header form button {
	background-color: #1e2b3f;
	color: #ADAEAD;
	border: 1px solid #1e2b3f;
	font-size: 20px;
	cursor: pointer;
}

header #menu {
	color: #c4b8ec;
	display: inline-block;
	font-size: 18px;
	margin-left: auto;
	margin-right: auto;
}

header #menu a {
	text-decoration: none;
	color: #c4b8ec;
}

header #menu a:hover {
	text-decoration: none;
	color: #c4b8ec;
	opacity: 0.7;
}

Bonjour,

Tout d'abord, n'utilise pas d'ID mais une classe pour le menu

1 passer le header en display:flex (le header devient une flex-box, les 3 éléments enfants vont pouvoir être alignés facilement)
2 enlever les display:inline-block et autres float:right, inutiles dans une flex-box
3 enlever les margin:auto du menu, inutiles dans une flex-box
4 header : on ajoute les alignements des éléments enfants de la flex-box :

display:flex;
justify-content:space-between;
align-items:center;

voir le cours sur flex pour plus de détails

Il serait bon d'enlever également les marges par défaut du <h1>, margin:0 donc
Voir si les padding du header sont encore nécessaires, pas certain .. 

C'est ce que tu voulais obtenir ?

Regarde du côté des flexboxs. Tu devrais arriver à faire ce que tu souhaites avec un display: flex et align-items:center sur le header.

Au passage, fais attention à la qualité de ta sémantique. Ton menu devrait être une <nav> et il contient une liste de liens (donc des <li></li> dans une <ul>).

Merci à vous deux, en effet ça marche en flex box

Et je vais changer ça par une <nav>