Центрирование списка с помощью CSS

Question

У меня возникли проблемы с центрированием моей навигационной панели, я вижу проблему, но я не могу найти исправления для нее. Извините, я немного новичок в CSS.

• Header bar with inspect element

Как вы можете видеть, что есть дополнительный блок в передней части списка. Я искал вокруг исправления, но я не могу показаться, что он подходит, не используя абсолютное позиционирование, которое я бы хотел избежать.

Вот jsfiddle страница, чтобы показать вам именно то, что я имею в виду - https://jsfiddle.net/h4ay0voj/2/

HTML код:

<header> 
    <h1>Header</h1> 
    <ul class="menu"> 
     <a class="active" href=""> 
      <li class="selected">Link1</li> 
     </a> 
     <a href=""> 
      <li>Link2</li> 
     </a> 
     <a href=""> 
      <li>Link3</li> 
     </a> 
     <a href=""> 
      <li>Link4</li> 
     </a> 
     <a href=""> 
      <li>Link5</li> 
     </a> 
    </ul> 
</header> 

CSS код:

header{ 
    width:80%; 
    overflow: hidden; 
    color:#ffffff; 
    margin-bottom:1%; 
    background: #292E37; 
} 

header a:link {text-decoration:none;color:#ffffff;} 
header a:visited{color:#ffffff;} 
header a:hover{color:#292E37;} 
header a.active{color:#4db8ff;font-weight:bold;cursor:default} 
header h1{text-align: center;} 

ul.menu{ 
    width:40%; 
    text-align:center; 
    text-decoration:none; 
    color: #000000; 
    margin-left: auto; 
    margin-right: auto; 
} 

ul.menu li{ 
    display: inline; 
    padding: 1%; 
    transition: background 0.2s; 
    padding-bottom:2.25%; 
} 

ul.menu li:hover{ 
    background:#a7afbe; 
    transition: 0.3s ease; 
    border-bottom: 3px solid #4db8ff; 
} 

Любая помощь будет принята с благодарностью :) Спасибо заранее!

Answer 1

Не уверен, что в других браузерах, но для Chrome вы можете видеть, что -webkit-padding-start: 40px; прилагается.

Вы можете просто установить отступы на элемент 0, например, так:

https://jsfiddle.net/byj0ye8g/

Или, лучше всего сделать для таких вопросов, как это использовать сброс CSS, как здесь: http://meyerweb.com/eric/tools/css/reset/

Кроме того, разместите свои якорные метки внутри тегов элементов списка, а не вокруг них.

Answer 2

Ширина, которую вы использовали для навигационной панели, была слишком маленькой, что приводило к «перекручиванию» навигационной панели. Я увеличил ширину до 60% для меню класса UL. Я обновил страницу JSFiddle, чтобы вы могли посмотреть, правильно ли это.

Вот правильный код:

ul.menu{ 
    width:60%; 
    text-align:center; 
    text-decoration:none; 
    color: #000000; 
    margin-left: auto; 
    margin-right: auto; 
}