Почему мой css не работает должным образом, когда я размещаю свою страницу в сети?

Question

Я работаю над викториной, в конце я показываю стрелку, которая будет перемещаться в зависимости от результата игрока. Но у меня странная проблема. У меня есть стрелка, указывающая на панель, чтобы показать игроку свой счет. Стрелка работает локально, но больше не работает, когда я помещаю свой проект на сервер. Я знаю, что положил туда все файлы точно, так что это не проблема. Другие части css, похоже, отлично работают рядом с этим. Я использую смелый браузер, чтобы проверить это. Вот как это выглядит на сервере и как это выглядит локально. Я отрежу часть своего js, потому что в нем слишком много несвязанного кода для этого вопроса. Изменить: я добавил весь свой код

(function () {

  const quizContainer = document.getElementById("quiz");
  const resultsContainer = document.getElementById("results");
  const displayQN = document.getElementById("question-numer");
  const myQuestions = [
    {
      question: `Apa pe care o consum este plata, oligoelementala, in recipient de sticla, structurata sau filtrata de la robinet`,
      factor: 2,
    },
    {
      question: `Sunt iubitor/consumator de lactate proaspete/ lactate maturate`,
      factor: 2,
    },
    {
      question: `Am o toleranta buna (pot consuma fara sa dezvolt reactie cutanata/ digestiva/ respiratorie) la      
                ton, peste spada, rechin, somon, scoici, fructe de mare, alti pesti oceanici
                produse care contin gluten: paine, cereale, biscuiti, prajituri, paste, fainoase
                alune, migdale, seminte de floarea soarelui, capsuni, alte fructe de padure
                mazare, fasole, linte, naut, varza, brocoli, conopida`,
      factor: 2,
    },
    {
      question: `Consum de 3x/saptamana oua de pasare/icre de peste`,
      factor: 2,
    },
    {
      question: `Mananc saptamanal stridii, fructe de mare, nuci si seminte, ciocolata neagra`,
      factor: 2,
    },
    {
      question: `Mananc zilnic fructe de culoare mov/ negre sau rosii`,
      factor: 2,
    },
    {
      question: `Mananc zilnic ulei de masline/ cocos/ unt/ulei de germeni de grau/ ulei de canepa`,
      factor: 2,
    },
    {
      question: `Mananc zilnic legume cu frunze verzi : Salata verde/ spanac / rucola / leurda / nasturel /creson de apa / cicoare / andive / patrunjel`,
      factor: 1,
    },
    {
      question: `Mananc zilnic dulciuri procesate, prajituri, creme`,
      factor: 2,
    },
    {
      question: `Mananc zilnic proteina animala de tip carne de porc/ vita/pasare`,
      factor: 2,
    },
    {
      question: `Mananc saptamanal mezeluri/patiserie/conserve sau alte alimente care contin conservanti sintetici`,
      factor: 1,
    },
    {
      question: `Consum zilnic bauturi alcoolice: spirtoase/ vin/ bere/ alte bauturi alcoolice`,
      factor: 2,
    },
    {
      question: `Consum zilnic minerale/ vitamine/ pulberi alcaline/ pulberi de super alimente/ ceai verde`,
      factor: 2,
    },
    {
      question: `Sunt alergic la praf/ polen/ fan/ plante de sezon/ ambrozie/ artemisia/ par animale/ intepaturi insecte/ mucegaiuri/ medicamente`,
      factor: 1,
    },
    {
      question: `Locuiesc intr-un oras aglomerat cu aer poluat`,
      factor: 1,
    },
    {
      question: `Locuiesc intr-o zona cu linii de inalta tensiune/ antene de telecomunicatii/dorm cu telefonul mobil deschis langa pat`,
      factor: 1,
    },
    {
      question: `Am afectiuni cronice diagnosticate pentru care primesc medicatie`,
      factor: 1,
    },
    {
      question: ` Sunt frecvent in situatia de a apela la antibiotice pentru rezolvarea unor probleme de sanatate`,
      factor: 1,
    },
    {
      question: `Am tulburari de tranzit intestinal (de exemplu mai putin de 2 scaune zilnice)`,
      factor: 1,
    },
    {
      question: `Am afectiuni inflamatorii de piele sau la nivelul sitemului osteoarticular (oaselor si incheieturilor)`,
      factor: 2,
    },
    {
      question: `Fac miscare zilnic sau practic sporturi de tip jogging, cardio, aerobic, sarituri`,
      factor: 2,
    },
    {
      question: `Viata familiala/ profesionala/ sociala e caracterizata de stress intens`,
      factor: 2,
    },
    {
      question: `Am stare de oboseala accentuata la trezire si manifest scaderea capacitatii de concentrare/ deconectare /detensionare`,
      factor: 1,
    },
    {
      question: `Merg la culcare pana in ora 23:00 si am un somn odihnitor`,
      factor: 2,
    },
    {
      question: `Am trecut printr-o trauma emotionala in ultimii 5 ani de tip: deces al unui membru al familiei/ divort/ accident /imbolnavire`,
      factor: 1,
    },
  ];

  const answersToQuiz =
    [

      "Niciodata",
      "Rar",
      "Ocazional",
      "Frecvent",
      "Intodeauna"

    ]

  function buildQuiz() {
    // variable to store the HTML output
    const output = [];

    // for each question...
    myQuestions.forEach((currentQuestion, questionNumber) => {
      // variable to store the list of possible answers
      const answers = [];
      // and for each available answer...
      for (const number in answersToQuiz) {

        // ...add an HTML radio button
        answers.push(
          `<label>
              <input class="answer-input" type="radio" name="question${questionNumber}" value="${number}">
              ${parseInt(number) + 1} :
              ${answersToQuiz[number]}
            </label>`
        );
      }

      // add this question and its answers to the output
      output.push(
        `<div class="slide">
          <div class="question">${currentQuestion.question} </div>
          <div class="answers"> ${answers.join("")} </div>
        </div>`
      );
    });

    // finally combine our output list into one string of HTML and put it on the page
    quizContainer.innerHTML = output.join("");
  }

  function showResults() {

    const generalQuizMinPoints = 40;
    const generalQuizMaxPoints = 200;

    displayQN.style.display = "none";

    // gather answer containers from our quiz
    const answerContainers = quizContainer.querySelectorAll('.answers');

    // keep track of user's answers
    let currentScore = 0;

    // for each question...
    myQuestions.forEach((currentQuestion, questionNumber) => {

      // find selected answer
      const answerContainer = answerContainers[questionNumber];
      const selector = `input[name=question${questionNumber}]:checked`;
      const userAnswer = (answerContainer.querySelector(selector) || {}).value;

      currentScore += (parseInt(userAnswer) + 1) * myQuestions[questionNumber].factor;
    });

    //here I will generate the html doc for the results bar
    const resultsDOOM = document.getElementById("results");
    
    resultsDOOM.style.display = "flex";

    let generalAnswerPercent = ((currentScore - generalQuizMinPoints)) / (generalQuizMaxPoints - generalQuizMinPoints);

    const styleOfIndicator = getComputedStyle(document.querySelector(".score-indicator"));

    let generalArrowLeftPositioning = Number(styleOfIndicator.width.replace(/px$/, '')) * generalAnswerPercent - Number(styleOfIndicator.width.replace(/px$/, '')) / 2;
    console.log(generalArrowLeftPositioning + " " + styleOfIndicator.width + " " + generalAnswerPercent);
    document.querySelector(".arrow-up-general").style.left = String(generalArrowLeftPositioning) + "px";
  }


  function checkIfAnswered() {
    const answer_input = document.querySelectorAll(".answer-input");
    answer_input.forEach((answer) => {
      answer.addEventListener("click", showNextSlide);
    })
  }

  function showSlide(n) {
    slides[currentSlide].classList.remove('active-slide');
    displayQN.textContent = `Intrebarea numarul: ${n + 1}/${myQuestions.length}`;
    if (n === slides.length) {
      showResults();
      previousButton.style.display = 'none';
      return;
    }
    slides[n].classList.add('active-slide');
    currentSlide = n;

    if (currentSlide > maxSlide) {
      maxSlide = currentSlide;
    }

    if (currentSlide === maxSlide) {
      nextButton.style.display = 'none';
    } else {
      nextButton.style.display = 'inline-block';
    }

    if (currentSlide === 0) {
      previousButton.style.display = 'none';
    }
    else {
      previousButton.style.display = 'inline-block';
    }
  }

  function showNextSlide() {
    showSlide(currentSlide + 1);
  }

  function showPreviousSlide() {
    showSlide(currentSlide - 1);
    nextButton.style.display = 'inline-block';
  }

  // display quiz right away
  buildQuiz();

  const previousButton = document.getElementById("previous");
  const nextButton = document.getElementById("next");
  const slides = document.querySelectorAll(".slide");
  nextButton.style.display = "none";
  let currentSlide = 0;
  let maxSlide = 0;

  showSlide(0);

  checkIfAnswered();
  // on submit, show results

  previousButton.addEventListener("click", showPreviousSlide);
  nextButton.addEventListener("click", showNextSlide);
})();

@import url(https://fonts.googleapis.com/css?family=Work + Sans:300, 600);

body {
  margin: 0px;
  font-size: 12px;
  font-family: "Work Sans", sans-serif;
  color: #333;
  font-weight: 300;
  text-align: center;
  background-color: #f8f6f0;
}
h1 {
  font-weight: 300;
  margin: 2px;
  padding: 10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input[type="radio"] {
  height: 1.6em;
  width: 1.6em;
}
button {
  font-family: "Work Sans", sans-serif;
  font-size: 22px;
  background-color: #279;
  color: #fff;
  border: 0px;
  border-radius: 3px;
  padding: 20px;
  cursor: pointer;
  margin: 20px 10px;
  z-index: 3;
  display: block;
  font-size: 2em;
}
button:hover {
  background-color: #38a;
}
.question {
  font-size: 3em;
  margin-bottom: 10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.answers {
  margin-bottom: 20px;
  text-align: left;
  display: inline-block;
  font-size: 3em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.answers label {
  display: block;
  margin-bottom: 10px;
}

.slide {
  position: static;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 1;
  display: none;
}
.active-slide {
  display: block;
  z-index: 2;
}
.quiz-container {
  position: static;
  height: auto;
  margin-top: 40px;
}

.score-indicator {
  margin-top: 20px;
  padding-top: 10px; /* Add top padding */
  padding-bottom: 10px; /* Add bottom padding */
  min-width: 250px;
  width: 10%;
  height: 100%;
  border-radius: 25px;
  background: rgb(255, 0, 0);
  background: -moz-linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 140, 0, 1) 33%,
    rgba(255, 195, 0, 1) 66%,
    rgba(50, 205, 50, 1) 100%
  );
  background: -webkit-linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 140, 0, 1) 33%,
    rgba(255, 195, 0, 1) 66%,
    rgba(50, 205, 50, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 140, 0, 1) 33%,
    rgba(255, 195, 0, 1) 66%,
    rgba(50, 205, 50, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000",endColorstr="#32cd32",GradientType=1);
}

[class*="arrow-up"] {
  position: relative;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 20px solid black;
}

#results {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 5px;
  display: none;
}

@media (min-width: 500px) {
  body {
    font-size: 18px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="QuizTransition.css">
  <meta name="viewport" content="width=device-width" />
</head>

<body>
  <div class="container">
    <div>
      <h1 id="question-numer">
        Intrebarea numarul:
      </h1>
    </div>
    <div class="quiz-container">
      <div id="quiz"></div>
    </div>
    <button id="previous">Intrebarea precedenta</button>
    <button id="next">Urmatoare intrebare</button>
  </div>
  <div id="results">
    <div class="score-indicator">
    </div>
    <div class="arrow-up-general"></div>
    
    <!--<div class="score-indicator">
      
    </div>
    <div class="score-indicator">
    </div>
    -->
  </div>
  <script src="QuizLogic.js"></script>
</body>

</html>

введите описание изображения здесь введите описание изображения здесь