HTML und CSS - Navigation

Hallo ich habe leichte schwierigkeiten mit meiner Navigation!

Problem:
Ich habe bei CSS den tag :hover benutzt. soweit funktionier es auch, aber wenn ich mit der Maus rübergehe, verschiebt sich alle nach rechts, also was im Menü daneben steht (rechts).
Wenn ich padding nur oben und unten mache, verutscht das nicht, aber es endet direkt vor/hinter dem Wort!

Ich habe alles so wie im Video gemacht:
https://www.youtube.com/watch?v=XZsuI5wyRzs

meine Webseite:
http://simuundquex.de

Ich hoffe auf eine Schnelle antwort

Ich habe mir das Video als Tutorial genommen!

Wer mir helfen kann: ts3server://simuundquex.de

einfach auf den Link klicken

- - - Aktualisiert - - -

Wenn du bei dem Menü über die Wörter rüberfährst, erscheint ein oranger rahmen... dieser Rahmen sollte breiter sein, sonst sieht das #?!;/('! aus (will nicht sch... schreiben)

Bitte schaut euch das Video nochmal an und vergleicht es mit meiner Webseite.... Ich weiß nicht, warum er das nicht macht

Entschuldige Gastl es liegt daran, dass ich es erstmal rausgenommen habe und nur

padding-top: 20px;
padding-bottom: 20px;

drin...

Sry... Geht nur bei TS also einfach simuundquex.de

Ja... Vielen dank!

Hallo nochmal... Ich habe erstmal alles so angewendet, wie du es sagtest, aber auf meinem PC! Nun habe ich alle meine Dateien hochgeladen und es funktionier NIX könntest du eventuell noch einmal schauen?
Ich habe es so in der css datei:

nav{
	width: 100%;
	background: lightblue;
}
ul
{
	width: 80%;
	margin: 0 auto;
	padding: 0;
}
ul li
{
	list-style: none;
	display: inline-block;
}
ul li :hover
{
	background: orange;
}
ul li a
{
	color: #fff;
	text-decoration: none;
    display:block;
    padding:20px;
}