Why my design of datatable data is not properly working in JQuery Datatable?

I have following code see my output image my design is scattered everywhere what is the reason behind this.

<div class="row">
<div class="col-md-12">
    <div class="panel panel-primary list-panel" id="list-panel">
        <div class="panel-heading list-panel-heading">
            <button type="button" class="btn btn-default btn-md" data-toggle="modal" data-url="@Url.Action("Create","Group")" id="btnCreateBranch">
                <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> Add Group
            </button>
        </div>
        <div class="panel-body">
            <table id="group-data-table" class="table table-striped table-bordered" style="width:100%;">
            </table>
        </div>
    </div>
</div>

My Jquery scripts is:

                    "columns": [
                        { "title": "Group Code", "data": "GroupCode", "searchable": true },
                        { "title": "Group Description", "data": "GroupDesc", "searchable": true },

                        {
                            "title": "Action",
                            "data": "GroupCode",
                            "searchable": false,
                            "sortable": false,
                            "render": function (data) {
                                return '<a  href="@Url.Action("Edit","Group")?GroupCode=' + data + '" class="btn btn-primary editGroup">Edit</a>  <a href="@Url.Action("Delete","Group")?GroupCode=' + data + '" class="deleteGroup btn btn-danger">Delete</a>';
                            }
                        }
                    ],
                    "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
                });
            },

            refresh: function () {
                dt.ajax.reload();
            }
        }

my final output is: My output image