Menu décalé

Bonjour,
je viens de faire un site pour le club de foot de mon village à l'adresse suivante http://www.jscellieu.fr/. Comme base je me suis appuyé sur le thème "twenty thirteen" de wordpress.
Après quelques modifications (vous allez me dire pas mal de bidouillage plutôt), je suis arrivé à peu près à ce que je voulais. Du coup je viens de mettre mon site en ligne et je me rend compte que malheureusement mon site à un problème : le menu ne se positionne pas normalement. Ce que je veux dire par la, c'est que l'image du site diffère selon l'écran, et qu'avec certaine définition, le menu de mon site est totalement décalé. ce qui est étonnant (pour moi mais peut être pas pour vous) c'est que tout le reste s'adapte parfaitement.
Pour mieux comprendre mon problème, allez sur le site http://www.jscellieu.fr/, enfoncez la touche "ctrl" et modifié la résolution avec "+" ou "-" ou avec la molette de votre souris. La vous verrez que le menu se décale à gauche quand on réduit et se décale vers la droite lorsqu'on agrandit.
Donc voila, depuis quelques jours je cherche la solution sur la toile et sur différent forum et, n’étant pas très à l'aise avec le webmastering, je m'en remet à vous. Comme je vous le disait au début de mon post, c'est un site pour le plaisir, c'est pour ça que je m'y colle. Je n'ai pas une grande connaissance dans le sujet mais bon je me débrouille sans prétention en ayant pour seul objectif de faire un petit truc sympa pour le club.

Merci par avance
Modifié par webnoobs (10 Nov 2013 - 23:03)

Salut, je vais être cache

Tu as un peu fait ça n'importe comment.
C'est une solution rapide mais bon, ça pourrait je pense solutionner ton problème avant de faire ça proprement :

.site-header {
    margin: 0 auto;
    padding: 0 200px;
    position: relative;
    width: 1600px;
}

On défini une largeur (celle que ta mis pour ton image de fond, j'ai ajouté du padding pour que le contenu commence à l'intérieur de la pelouse).

Ensuite pour ton

 .navbar {
    height: 100px;
    margin: 0 140px;/* on dégage cette ligne qui ne sert plus à rien */
    max-width: 955px;
    width: 100%;
}

Normalement ton menu sera toujours calé, ensuite faut adapté l'image de fond des autres blocs comme pour le header pour que ça parte pas en sucette.

Bon courage, c'est déjà un bon début !

Salut artsx,
bon ben t'as raison sur le point essentiel, c'est un peu le fouillis dans la façon dont je m'y suis pris. Du coup je refais tout. Ça m'apprendra à pas faire propre du premier coup, mais je vais t'avouer que je m'y suis lancé au départ juste pour essai.
En tous cas merci pour ton aide même si ça ne marche pas

@ + tard .