Dovendo affrontare diversi tipi di numerazioni pensavo che la soluzione migliore fosse simulare la numerazione inserendo la numerazione manualmente come ho fatto nel sito:
Ciao, a mio parere "manualmente" è sempre sinonimo di "artigianale"; a meno che non parliamo di cestini in vimini e coltelli sardi in corno di muflone, non è mai la soluzione migliore per applicazioni web.

Perchè ho creato nel sito una struttura <ul> <li> con classi che vengono richiamate anche con Javascript e che si espandono al click, quindi non vorrei dover smembrare tutto il codice pre-esistente ma inserire
questa funzionalità solo dove neccesario.
HINT: la maggior parte degli elementi HTML hanno funzioni specifiche e un valore semantico per la corretta fruizione dei contenuti. Per gli elenchi numerati sarebbe più opportuno e logico usare <ol> (ordered list) anziché <ul> (unordered list). Nel tuo caso cambierebbe poco a livello strutturale, perché ad ogni modo vai a personalizzare l'indicatore degli elementi <li>, ma ciò non toglie che è sempre meglio fare un uso appropriato degli elementi in base alla loro specifica funzione e semantica.

Arrivando al dunque, personalmente risolverei la cosa alla radice usando in modo opportuno gli strumenti HTML e CSS. Niente numerazioni applicate in modo manuale; dal momento che hai delle liste, usale per quello che sono. Il CSS offre la possibilità di usare dei contatori, attraverso uno pseudo-elemento, così che si possano creare delle sequenze personalizzate per gli indicatori delle liste.

In questo modo, magari definendo delle specifiche classi, puoi applicare numeri con parentesi, punti, lettere, capre e quant'altro vorrai.

Qui un esempio:
codice:
<!DOCTYPE HTML>
<html lang="it">
  <head>
    <title>Esempio</title>
    <style>

      ol.num-list {
        counter-reset: num-list;
      }
      ol.num-list li {
        display: block;
        margin: 8px 0;
      }
      ol.num-list li:before {
        content: "(" counters(num-list, ".") ") ";
        counter-increment: num-list;
        color: #060;
        position: absolute;
        margin-left: -8px;
        transform: translateX(-100%);
      }


      ol.x-list {
        counter-reset: x-list;
      }
      ol.x-list li {
        display: block;
        margin: 8px 0;
      }
      ol.x-list li:before {
        content: "X" counters(x-list, ".") " ";
        counter-increment: x-list;
        color: #930;
        position: absolute;
        margin-left: -8px;
        transform: translateX(-100%);
      }


      ol.capra-list {
        counter-reset: capra-list;
      }
      ol.capra-list li {
        position: relative;
        display: block;
        margin: 8px 0;
      }
      ol.capra-list li:before {
        content: "\1f410" counters(capra-list, "•") " ";
        counter-increment: capra-list;
        color: #f00;
        position: absolute;
        margin: -2px 0 0 -8px;
        transform: translateX(-100%);
      }

    </style>
  </head>
  <body>

    <ol class="num-list">
      <li>Lorem ipsum dolor sit amet
      <li>Consectetur adipiscing elit. Morbi venenatis nibh sit amet mi elementum semper. 
      <li>Quisque suscipit sem non est eleifend consectetur.
        <ol class="num-list">
          <li>Suspendisse malesuada massa lorem, id pharetra arcu iaculis a.
          <li>Aliquam in dolor vitae purus interdum vulputate vel ac augue.
          <li>Nulla congue vehicula purus eget scelerisque. Nunc eget lacus at arcu scelerisque gravida ut non lectus. Maecenas ullamcorper libero ex, eleifend porttitor lacus convallis a. Suspendisse malesuada massa lorem, id pharetra arcu iaculis a.
        </ol>
      <li>Nullam suscipit metus id sem eleifend, ut molestie eros dictum.
      <li>Curabitur faucibus urna nec ullamcorper pharetra.
    </ol>

    <hr>

    <ol class="x-list">
      <li>Nunc eget lacus at arcu scelerisque gravida ut non lectus.
      <li>Donec sit amet felis in justo hendrerit ornare eu sed risus. 
        <ol class="x-list">
          <li>Fusce suscipit, eros id cursus suscipit
          <li>Urna orci ullamcorper velit, sed ultricies mauris enim sed quam. 
        </ol>
      <li>Sed nibh ante, tempor ac eleifend non, sodales a massa.
      <li>Phasellus ornare elementum semper. 
      <li>Maecenas ullamcorper libero ex, eleifend porttitor lacus convallis a.
    </ol>

    <hr>

    <ol class="capra-list">
      <li>Nunc eget lacus at arcu scelerisque gravida ut non lectus.
      <li>Donec sit amet felis in justo hendrerit ornare eu sed risus. 
        <ol class="capra-list">
          <li>Fusce suscipit, eros id cursus suscipit
          <li>Urna orci ullamcorper velit, sed ultricies mauris enim sed quam. 
            <ol class="capra-list">
              <li>Sed nibh ante, tempor ac eleifend non, sodales a massa.
              <li>Phasellus ornare elementum semper. 
            </ol>
        </ol>
      <li>Maecenas ullamcorper libero ex, eleifend porttitor lacus convallis a.
    </ol>

  </body>
</html>
Una volta definite le diverse classi col relativo CSS, potrai applicarle agli elementi <ol> per ottenere i diversi elenchi personalizzati.

Il problema della spaziatura/indentazione l'ho risolto posizionando opportunamente lo pseudo-elemento ":before" in cui è contenuto l'indicatore personalizzato.

Prova ad applicarlo al tuo elaborato e fai sapere.
Chiedi pure, se ti servono ulteriori chiarimenti sul codice che ho usato.




HINT: ricorda di usare il validatore. Nella pagina lincata vedo che gli errori stanno crescendo sempre di più rispetto all'ultimo problema; meglio correggerli da bambini prima che prendano il sopravvento.

Ad esempio vedo diversi <div class="spacing"></div> che hai posto come figli di elementi <ul>, ma un elemento <ul> può avere solo figli <li>. Se il tuo intento è quello di creare un margine iniziale, esistono modi più consoni usando opportunamente il CSS.

Ma vabbè, viva l'artigianato