как центрировать навигационное меню

Question

Я попробовал несколько исправлений, и я попытался осмотреться на w3school, если у них уже есть какое-то учебное пособие, которое показывает это, но у них нет штрих-кода для центральной навигации, и я попробовал некоторые вещи, такие как text-align: center;в заголовке li, но, похоже, не работает.спасибо.

body {
	font-family: Impact, Charcoal, sans-serif;
	font-size: 16px;

}

/* global */
.container{
	width:80%;
	margin:auto;
	overflow:hidden;
}

/** header */

header{
	background-color:#1E90FF;
	color:#ffff;
	padding-top:30px;
	min-height:70px;
	border-spacing:5px;
	font-size:20px;
}

header a{
	color:#ffff;
	text-decoration:none;
	font-size:13px;	
	display:block;
	text-align: center;
	width:150px;
}

header ul{
    margin: :0;
	padding:0;
}

/* same thing as li */

header li{
	opacity: 0.4;
	float:left;
	display:inline;
	padding: 0 20px 0 20px;
}

header li:hover {
    color: white;
	opacity: 1;
}

/* centers the title*/
header #branding{
	text-align: center;
}

				<nav>
					<ul>
						<div id="hub">
							<li><a href="index.html">Home</a></li>
							<li><a href="Games.html">Games</a></li>
						</div>
					</ul>
				</nav>

Answer 1

body {
	font-family: Impact, Charcoal, sans-serif;
	font-size: 16px;
  margin:0;
  padding:0;
}

ul {
  margin:0;
  padding:0;
}


#hub {
  display:flex;
  width:100vw;
  justify-content:space-around;
}

#hub li {
  width:auto;
  list-style:disc;
}


/* global */
.container{
	width:80%;
	margin:auto;
	overflow:hidden;
}

/** header */

header{
	background-color:#1E90FF;
	color:#ffff;
	padding-top:30px;
	min-height:70px;
	border-spacing:5px;
	font-size:20px;
}

header a{
	color:#ffff;
	text-decoration:none;
	font-size:13px;	
	display:block;
	text-align: center;
	width:150px;
}

header ul{
    margin: :0;
	padding:0;
}

/* same thing as li */

header li{
	opacity: 0.4;
	float:left;
	display:inline;
	padding: 0 20px 0 20px;
}

header li:hover {
    color: white;
	opacity: 1;
}

/* centers the title*/
header #branding{
	text-align: center;
}

<nav>
					<ul>
						<div id="hub">
							<li><a href="index.html">Home</a></li>
							<li><a href="Games.html">Games</a></li>
						</div>
					</ul>
				</nav>

Answer 2

Text-align: центр на ul должно быть достаточно.Попробуйте это:

nav ul {
    text-align:center;
}

https://jsfiddle.net/contwz7s/