Bonjour,

En premier lieu, voici mon lien CodePen, ce sera beaucoup plus pratique pour vous : https://codepen.io/MTTK/pen/gZPEvp

Voila mon soucis, quand je passe ma souris sur les icônes facebook / twitter etc ... Cela fait bouger tout mon menu comme vous pouvez le voir.

J'imagine que le soucis viens de l'usage des FlexBox mais je n'arrive pas à savoir comment régler cela.

Si quelqu'un a la réponse, je suis preneur ! 

Merci de votre aide. 

salut,

trop facile c'est côté css que tu as ton souci :

.header-nav-icons .icons{
  font-size: 1.3rem;
  margin: 0 9px;
  text-align: center;
}

.header-nav-icons .icons:hover{
  font-size: 1.5rem;

}

c'est le fait de mettre un font-size plus gros sur le hover qui te fait bouger le menu.

Testes avec ça, tu verras (le border est dégueulasse je sais ), le menu ne "bouge" plus. 

.header-nav-icons .icons{
  font-size: 1.3rem;
  margin: 0 9px;
  text-align: center;
  border:1px solid transparent;
}

.header-nav-icons .icons:hover{
  border:1px solid black;
}

Bonjour  MTK-MTK,

Utilise transform:scale() sur le hover

Exemple :

https://codepen.io/Zonecss/pen/PXNOrN