Lista nie wyśrodkowuje się w DIVIE

Question

Witam. 

Menu stworzone za pomocą listy, nie chce się dać wyśrodkować za pomocą position: relative; left: 50%, co jest?

Czy takie rozwiązanie dla wyśrodkowania takiego menu jest dobre? A może należy użyć innego sposobu?

Tak to wygląda:

<div id="navigation"> 
		
		<ul>
			<li><a href="index.html">O szkole</a></li>
			<li><a href="index.html">Kontakt</a></li>
			<li><a href="index.html">Pracownicy</a></li>
			<li><a href="index.html">Galeria</a></li>
		</ul>
		
	</div>

#navigation
{
	width: 100%;
	height: 50px;
	padding: 0;
	background-color: #64B5F6;
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
}

ul
{
	display: block;
	list-style: none;
	margin: auto;
	padding: 0;
	line-height: 30px;
	text-align: center;
	position: relative;
	left: 50%;
}

ul li
{
	float: left;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	text-align: center;
	color: white;
	padding: 10px;
	font-size: 18px;
	font-family: Arial;
	font-weight: 500;
	letter-spacing: 2px;
}

ul a:hover
{
	background-color: #53A5E5;
}

 

Answer 1

Nie ma sensu używać w nawigacji  float skoro mamy flexbox Dodaj klasę do ul i nadaj jej 

display: flex;
justify-content: center;

 

Answer 2

Rozwiązanie znalazłem na codepen.io, przeczytaj również kod na w3.org.

Zmień swoje fragmenty kodu na te poniżej.

ul
{
    display: block;
    list-style: none;
    margin: auto;
    padding: 0;
    line-height: 30px;
    text-align: center;
    position: relative;
    float: right;
    left: -50%;
}
 
ul li
{
    float: left;
    position: relative;
    left: 50%;
}

Answer 3

Wysrodkuj za pomocą text-align: center;