javascript でルーレット作成

前提・実現したいこと

画像のようなルーレットをjavascriptで作りたいのですが
レイアウトが上手く　4ｘ4　のマスにできません。。

ご教示お願いします。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="roulette.css">
         <style>
         .colorRed {
    background-color:#ff4500;
}

.colorPink{
     background-color:#ffa07a;
}
.div_number{
    width:30px;
    height:30px;
}

.display{
    display: flex;
    width: 120px;
    height: 120px;

}
</style>

   
        <script>
            var initial_value =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
           var number = 1;
           var grid = 0;
             
            
            
            var interval;
            var first = false;
            
            function start_set(){
                document.getElementById("start").disabled = true;
                document.getElementById("stop").disabled = false;
                document.getElementById("reset").disabled = false;
                if(first === false){
                    interval = setInterval(start_go,100);
                    first = true;
                }         
            }
            
            function start_go(){
               
                
                var div_number = document.getElementById('div' + number);
                div_number.classList.remove('colorRed');
               
                 grid = Math.floor(Math.random()*initial_value.length);
                 number = initial_value[grid];
              
                console.log(grid + ':' + number);
                
            　　div_number = document.getElementById('div' + number); 
                div_number.classList.add('colorRed');
            
                
                
            }
            
           
            function stop_set(){
                document.getElementById("stop").disabled = true;
                
                clearInterval(interval);
                document.getElementById("start").disabled = false;
                first = false;
                initial_value.splice(grid,1);
                var div_number = document.getElementById('div' + number);
                 div_number.classList.remove('colorRed');
                 div_number.classList.add("colorPink");
                  if(initial_value.length === 0){　
                  document.getElementById("start").disabled = true;
                  }
               
            }
            
            function reset_set(){
                  clearInterval(interval);
                first = false;
                document.getElementById("start").disabled = false;
                
                 for(var j = 1; j <= 16 ; j++){
                     var all = document.getElementById("div" + j);
                     all.classList.remove('colorPink');
                     all.classList.remove('colorRed');
                
                 }
                // var div_number = document.getElementById('div' + number);
                // div_number.classList.remove('colorPink');
                //  div_number = document.getElementById('div' + number);
                // div_number.classList.remove('colorRed');
               
            }
            
            window.onload =function(){
                var starter = document.getElementById("start");
                var stopper = document.getElementById("stop");
                var resetter = document.getElementById("reset");
                 var display = document.getElementById("display");
                
                starter.addEventListener("click",start_set,false);
                stopper.addEventListener("click",stop_set,false);
                resetter.addEventListener("click",reset_set,false);
                 document.getElementById("stop").disabled = true;
                 document.getElementById("reset").disabled = true;
             
                 for(var i = 0; i < initial_value.length; i++){
                     var div = document.createElement("div");
                     div.innerHTML = initial_value[i]; 
                     div.id = 'div' + initial_value[i];
                    div.classList.add("div_number");
                    //  console.log(initial_value[i]);
                 display.appendChild(div);
            }
                
            }
        </script>
        
    </head>
    <body>
        
        <div id = "display" class="display"></div>
        <button id ="start">スタート</button>
        <button id ="stop">ストップ</button>
        <button id ="reset">リセット</button>
        
    </body>
</html>