CSS -Séparer deux sliders pour les déplacer

​
Salut

 en les mettant en position absolue 

 non non pas utile !

bon je vais pas te faire un cour sur le css ,

flex est une simplification css mais peut causer  des problèmes sur des pages plus complexe !

Perso je n utilise pratiquement jamais  flex ,

je préfère la méthode classic avec les  les float, les clear both les inline-block ect un peu plus complexe a appréhender mais bien plus versatile !

mais ton problème ne vient pas de la !

il vient du fait que tu sépare les 2 servo en 2 div de même class "servo" dans ton cas !

les 2 div ont  les mêmes valeurs css ! donc se chevauche !

met les 2 servo dans UNE SEULE  div de class servo  et il ne se chevaucheront plus !

<div class="servo">
        <h1 class="servo1">
          {{ servo1 }}
        </h1>
        <div class="slider">
          <input type="range" min="0" max="180" value="90" class="slider" id="servo1Slider" onchange=
          "update_value(this.value, 'servo1')">
        </div>
        <div id="sep"></div>
        <h1 class="servo2">
          {{ servo2 }}
        </h1>
        <div class="slider">
          <input type="range" min="0" max="180" value="90" class="slider" id="servo2Slider" onchange=
          "update_value(this.value, 'servo2')">
        </div>
      </div>

fait aussi attention a bien séparer les éléments html de leurs attribut

  <div class="flex"> OK

 <divclass="flex"> PAS BON

parce que dans le code que tu as mis toute les ligne html ont ce problème.

et la prochaine fois utilise la touche "insérer un extrait de code" entre Normal et image dans la barre de tache en haut des messages que tu post 

a+