Trying to create a Roulette Wheel with css and javascript

Question

I've created a roulette wheel with css and javascript.

I have divided the angles as follows: 360 /37 (as there are 37 numbers) without any styles im able to have all numbers in a circle. I have now just changed the backgound colour for odd and even. But the last number is appearing alot larger? Please could someone tell me where im going wrong.

    <div class="wrapper">
  <button id="cta">button</button>
  <button id="reset">reset</button>
  <div class="table-wrapper" data-result="1">
    <ul id="table">




    </ul>



  </div>

</div



    *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.wrapper{
  width:500px;
  height:500px;
  margin:400px auto;

 }

 li:nth-child(odd){
   background:red;

}
li:nth-child(even){
  background:black;

}

li:first-child {
   background:green;
  border-left:10px solid green;
 }



#reset{
  position:absolute;
  top:50px;

}

.table-wrapper{
  width:350px;
  height:350px;
  position:relative;
  border-radius:50%;
  border:1px solid black;

}

#table{
  width:350px;
  height:350px;
  position:absolute;
  text-align:center;
  border:4px solid blue;
  text-align:center;
  border-radius:50%;
  overfow:hidden;
}

.number {
position:absolute;
color:#fff;
 width:34px;
  height:200px;
  margin-left:47%;
list-style:none;
transform: translate(50%, -50%);
      transform-origin: bottom;

}
input{
  display:none;
}

[data-result='7'] #table::after{
  animation:one 5s ease-out;
  animation-fill-mode: forwards;



}

#table::after{
  display:none;
   content:'\2022';
  position:absolute;
  height:200px;
  width:200px;
  border:1px solid yellow;
  top:-300px;
  left:100px;
  background:gray;
  border-radius:50%;
/*   animation:spin 5s ease-out; */

}

@keyframes one{
   0%{
    transform:rotate(0deg);
  }
    100%{

    transform:rotate(778deg);

  }


}
@keyframes spin{
  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(360deg);
  }
}





    let numberArray=['0','26', '3','35', '12', '28', '7', '29', '18', '22', '9','31', '14', '20', '1', '33', '16', '24', '5', '10', '23', '8', '30', '11', '36', '13', '27', '6', '34', '17', '25', '2', '21', '4', '19', '15','32']

let tableWrapper = document.querySelector('.table-wrapper');
let table =document.getElementById('table');
let randomNumber = Math.floor(Math.random()*36);
console.log(randomNumber)


for(var i=0;i<numberArray.length;i++){
  table.innerHTML+=`<li class=number number${numberArray[i]}     style="transform:rotate(${i*9.729}deg)"><label> <input type="radio" value= ${i}> </label><span> ${numberArray[i]}</span></li>`;
}

let cta = document.getElementById('cta');
cta.addEventListener('click',()=>{

  tableWrapper.setAttribute('data-result', '7');


})

let reset = document.getElementById('reset');

reset.addEventListener('click',()=>{

  tableWrapper.setAttribute('data-result', '0');
})

https://codepen.io/leecocky/pen/JjYRrKd