Всем привет!
 
	 
	Мне нужно сделать горизонтальное меню посередине страницы. Я его сделал и через <ul>, при этом width 100% и margin 0, но почему-то слева возник отступ от края страницы. Градиент на заднем плане - это background-image, и там болжны быть белые отступы, потому что картинка такая, а отступ у меню быть не должен..
 
	Не подскажите, как это исправить?  Код и скриншоты прилагаю.
 
	 
 
<body>
  <div class="topnav">
  <ul> 
    <li ><a href="default.asp" id="first">Л1</a></li>
    <li><a href="news.asp" id="second">Ф2</a></li>
    <li><a href="contact.asp" id="third">С3</a></li>
    <li><a href="about.asp" id="fourth">О4</a></li> 
  </ul>
  </div>
</body>
body {
  background-image: url("https://sun1-20.userapi.com/c830108/v830108125/1c35a9/gYiNRO0w7sw.jpg");
  background-size: cover;
}
.topnav {
  margin: 0 auto;
}
ul {
  list-style-type: none;
  position: absolute;
  margin: 0 auto;
  margin-top:23.5%;
  padding: 0 ;
  overflow: hidden;
  height: 83px;
  width: 100%;
}
li {
  float: left;
  display: inline;
}
li a {
  display: block;
  text-align: center;
  padding: 24px 34px;
}