Menu zjeżdża na prawo

HTML:

<ul>
<li><a href="link"></a></li>
<li><a href="link"></a></li>
</ul>

CSS:

body {
  margin: 0;
  background-color:#1c1c1c;
  font-family: 'Anton', sans-serif;
}
ul {
  width: 20%;
  list-style:none;
  margin-right:auto;
  margin-left:auto;
  background-color:blue;
}

li a{
  display:block;
  position:relative;
  padding: 10px 15px;
  text-decoration: none;
  color: white;
  margin-top: 9px;
  top:0;
  margin-bottom: 5px;
  background-color:red;
  margin-right:auto;
  margin-left:auto;
}

li a:hover{
	opacity: 80%
}


.logo {
	width: 100%;
	color: white;
	text-align: center;
	font-size: 400%;
	margin-top:5%;
}

i z jakiegoś powodu guziki tego menu są przyklejone do prawej strony: