Alignment of elements per line

Question

I’m trying to align the elements, but without success. The idea is to limit per line only 8 elements, besides not happening that, still keeps returning error:

Misaligned elements:

Codes:

Html:

<div class="col-lg-12">
        <div class="box">
            <div class="box-header">
                <i class="fa fa-eye"></i>
                <h3 class="box-title">
                    Eventos por Operador
                </h3>

            </div>
            <div class="box-body" id="bolhas">
             <!-- Carregar os elementos do JavaScript aqui -->
                </div>
            <div class="overlay">
                <i class="fa fa-refresh fa-spin"></i>
            </div>



        </div>

    </div>

Javascript:

function PreencherBolhas(){
    $.ajax({
        async: false,
        type: 'GET',
        url: '/Developer/GetContadoresOperadoresEventos',
        success: function (data) {
            var linha = "<div class='col-lg-6' style='padding-right:0px;'>";
            var row = "<div class='col-lg-6' style='padding-right:0px;'>";
            for (var i = 0; i < data.length; i++) {
                var temp = data[i];
                linha += "<div class='col-lg-3'>";
                linha += "<div class='small-box bg-yellow'>";
                linha += "<div class='inner'>";
                linha += "</div>";
                linha += "</div>";
                linha += "<h2 style='margin-left: 2.5vw;'>" + temp.percentual + " %" +  "</h2>";
                linha += "<p style='color: black'>" + temp.dsNome + "</p>";
                linha += "</div>";
            }
            linha += "</div>";
            var html = document.getElementById('bolhas');
            var box = document.getElementsByClassName('col-lg-12');
            html.innerHTML = linha;
            document.box.appendChild(html);
        }
    });
}

Anyway I don’t know how to fix, if someone can guide me.