Zentrieren einer Liste mit CSS

Question

Ich habe Probleme, meine Navigationsleiste zu zentrieren, ich kann das Problem sehen, aber ich kann nicht wirklich eine Lösung dafür finden. Entschuldigung, ich bin irgendwie neu in CSS.

• Header bar with inspect element

Wie Sie ein ein zusätzlicher Block gibt es auf der Vorderseite der Liste zu sehen. Ich habe nach einer Lösung gesucht, aber ich kann es scheinbar nicht fit machen, ohne absolute Positionierung zu verwenden, die ich gerne vermeiden würde.

Hier ist eine jsfiddle Seite zeigen Ihnen genau, was ich meine - https://jsfiddle.net/h4ay0voj/2/

HTML-Code:

<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-Code:

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; 
} 

Jede Hilfe wäre sehr dankbar :) Vielen Dank im Voraus!

Answer 1

Nicht sicher über andere Browser, aber für Chrome können Sie sehen, dass -webkit-padding-start: 40px; angewendet wird.

Sie können einfach eingestellt das Polster auf dem Elemente 0 in etwa so:

https://jsfiddle.net/byj0ye8g/

Oder das Beste, was für Themen wie dies zu tun ist ein CSS-Reset wie hier zu verwenden: http://meyerweb.com/eric/tools/css/reset/

Platzieren Sie auch Ihre Anker-Tags innerhalb der Listenelement-Tags, nicht um sie herum.

Answer 2

Die Breite, die Sie für die Navigationsleiste verwendet haben, war zu klein, was zu einem "Knirschen" der Navigationsleiste führte. Ich habe die Breite für das UL-Klassenmenü auf 60% erhöht. Ich habe die JSFiddle-Seite aktualisiert, damit Sie sie sehen können, um zu sehen, ob das richtig ist.

Hier ist der richtige Code:

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