UL won't center on the Div. Padding won't fix it. Margin either

I see this question a lot but I can't find the answer with either padding or margin. For some reason I can't center the ul element correctly inside the div and the div needs to be this way.

Can someone explain what I am doing wrong and how to solve it?

https://jsfiddle.net/norbertoalexander/4ea23bbn/2/

/* FUENTES
font-family: 'Lobster', cursive;
font-family: 'Playfair Display', serif;
*/

/*
Fondo = #FEFFA0
Borde = #ACDB86
Fondo Texto = #EEEEEE
Hoover = #547C66
Letras = #3B5B5D
*/

html, body {
	height: 100%;
	margin: 0;
	background-color: #FEFFA0;
}

div.head {
	height: 70px;
	background-color: #ACDB86;
	margin: 0 auto;
}

h1 {
	font-family: 'Lobster', cursive;
	font-size: 45px;
	text-align: center;
}

div.menu {
	border-style: solid;
	border-color: blue;
	margin: 5px;
	float: left;
	width: 150px;
	height: 500px;
	list-style: none;
	text-align: center;
}

ul {
	margin: 0 auto;
	list-style: none;
	text-align: center;
	font-size: 20px;
}

li {
	margin: 0 auto;
	text-align: center;
}

h2 {
	text-align: center;
	font-size: 25px;
	font-family: 'Lobster', cursive;
}

div.fuent {
	border-style: solid;
	border-color: blue;
	margin: 5px;
	float: right;
	width: 150px;
	height: 500px;
}

div.leng {
	border-style: solid;
	border-color: yellow;
	margin: 5px;
	width: 72%;
	float: left;
}

div.resu {
	border-style: solid;
	border-color: blue;
	margin: 5px;
	width: 72%;
	float: left;
}

<!DOCTYPE HTML">
<html>
<head>
<title>Lenguajes</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lobster|Playfair+Display" rel="stylesheet">
<link href="styles/leng.css" rel="stylesheet" type="text/css">
</head>
<body>
	<!--titulo-->
	<div class="head">
	<h1>Lenguajes</h1>
	</div>
	<div class="menu">
		<ul>
			<li><h2>Menu</h2></li>
			<li><a href="index.html">Incio</a></li>
			<li><a href="algoritmo.html">Algoritmos</a></li>
			<li><a href="lenguajes.html">Lenguajes</a></li>
			<li><a href="problemas.html">Problemas</a></li>
			<li><a href="about.html">Sobre mi</a></li>
		</ul>
	</div>
	<div class="fuent">
	Fuentes
	</div>
	<div class="resu">
	Resumen
	</div>
	<div class="leng">
	Lenguaje
	</div>
</body>


</html>

Solution

There's a padding on the <ul>, remove it and the menu is centered:

ul {
    padding: 0;
}