[Position: fixed ] & [Position: absolute] décalages incompréhensibles

Bonjour,

En pleine construction d'un site super simple pour l'association d'un ami, jusque là tout allait bien, sauf que je rencontre actuellement deux problèmes pour la propriété "position".

En effet, dans un premier temps mon but est de rendre mon menu de haut de page toujours apparent au scroll, mais voilà, lorsque j'ajoute cette ligne de code ma barre de menu se décale sur la gauche et ne prend plus toute la largeur de la page, et la barre de menu croque un pe sur la hauteur de la div juste en dessous.

Voici ce que ça donne AVEC le

position: fixed;

:

Voici ce que ça donne SANS le

position: fixed;

:

Voici mon code CSS:

body{
margin:0px;
padding:0px;
}
/*PAGE D'ACCUEIL*/
/*Menu navigation*/
.nav {
background-color:#05131E;
height:90px;
text-transform:uppercase;
background-position:center center;
 -webkit-background-size: cover; /* pour Chrome et Safari */
 -moz-background-size: cover; /* pour Firefox */
 -o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
position:fixed;
}
.nav table{
padding-top:15px;
margin-left:auto;
margin-right:auto;
height:20px;
}
.nav td{
/*border:1px solid white;*/
text-align:center;
padding-left:50px;
padding-right:50px;
}
.nav td a{
color:white;
font-size:15px;
font-family:helvetica;
letter-spacing:6px;
text-decoration: none;
}
.nav td span a{
font-family:Six Caps;
font-size:40px;
}
/*Première Bande*/
#bandeLogo{
height:502px;
background: white;
background-image:url("https://imagizer.imageshack.us/v2/1083x677q90/538/JcboAJ.jpg");
background-repeat: no-repeat;
background-position:center center;
 -webkit-background-size: cover; /* pour Chrome et Safari */
 -moz-background-size: cover; /* pour Firefox */
 -o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
padding-top:68px;
}
#bandeLogo img{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:0px;
}

Dans un second temps, j'ai inséré une liste d'images auxquelles il y a certains effets lors du passage de la souris (ce morceau de code n'est pas de moi, je l'ai simplement modifié légèrement pour qu'il s'intègre au mieux à mon code), et là même problème avec cette propriété "position", mais cette fois pour la valeur "absolute" donc

position: absolute;

. Les images se décalent largement vers la droite et rien à faire pour les replacer à coup de margin. Seulement je suis obligé d'utiliser cette propriété pour que la propriété "z-index" de ce code fonctionne correctement.

Voyez plutôt:
AVEC

position: absolute

:

SANS

position: absolute

:

Le code HTML:

<div id="bandeProj">Bienvenue...
        <div id="ligneImg">
            <ul>
              <li><img src="https://imagizer.imageshack.us/v2/960x886q90/540/ihZttw.jpg" alt="" /></li>
              <li><img src="https://imagizer.imageshack.us/v2/960x872q90/661/HcyzaL.jpg" alt="" /></li>
              <li><img src="https://imagizer.imageshack.us/v2/960x885q90/673/rhP4D8.jpg" alt="" /></li>
              <li><img src="https://imagizer.imageshack.us/v2/960x884q90/913/fGpjVR.jpg" alt="" /></li>
              <li><img src="https://imagizer.imageshack.us/v2/960x883q90/673/E6lF3m.jpg" alt="" /></li>
              <li><img src="https://imagizer.imageshack.us/v2/960x884q90/674/sCUhLc.jpg" alt="" /></li>
              <li><img src="https://imagizer.imageshack.us/v2/960x885q90/673/PAIdPj.jpg" alt="" /></li>
            </ul>
        </div>
    </div>

Le code CSS:

/*Le Projet*/
#bandeProj{
height:570px;
background-color:white;
color:#05131E;
text-align:center;
font-size:60px;
font-family:Niconne;
padding-top: 0px;
cursor:default;
}
#ligneImg ul{
display:inline;
width:260px;
height:260px;
margin-right:50%;
margin-left:50%;
}
#ligneImg ul li{
list-style:none;
float:left;
width:260px;
height:260px;
}
#ligneImg ul li:nth-child(8){
clear:right;
}
#ligneImg ul img{
/*position:absolute;*/
z-index:1;
height:260px;width:260px;
box-shadow:0 0 3px black;
-webkit-transition:all .5s cubic-bezier(.6,2,.4,1);
    -moz-transition:all .5s cubic-bezier(.6,2,.4,1);
     -ms-transition:all .5s cubic-bezier(.6,2,.4,1);
      -o-transition:all .5s cubic-bezier(.6,2,.4,1);
         transition:all .5s cubic-bezier(.6,2,.4,1);
}
#ligneImg ul li:hover img{
z-index:5;
-webkit-transform: scale(2);
    -moz-transform: scale(2);
     -ms-transform: scale(2);
      -o-transform: scale(2);
         transform: scale(2);
box-shadow:0 0 10px black;
}
#ligneImg ul:hover li:not(:hover) img{
-webkit-filter: grayscale(1) blur(5px);
    -moz-filter: grayscale(1) blur(5px);
     -ms-filter: grayscale(1) blur(5px);
      -o-filter: grayscale(1) blur(5px);
         filter: grayscale(1) blur(5px);
}

Ah, et j'arrive pas à centrer cette foutue liste d'image, même avec les

margin-left:50%

et

margin-right:50%

qui ont eu l'effet bizarre (enfin selon moi) de se centrer verticalement, et non horizontalement.

Merci d'avance tout le monde !