Javascript 删除第一列、最后一列和列之间的引导空间

我已在此处完成以下代码“”

我试着移除两列之间的空间，在第一列之前和最后一列之后，基本上把所有的东西并排堆放，没有任何空间。我尝试过使用类似问题的堆栈溢出回答中没有找到的排水沟。然而，我无法让它工作。如何删除空格

    <style>

        @import url(https://fonts.googleapis.com/css?family=Roboto:300);

      .ui-effects-transfer
      {
        border: 2px
        dotted gray;
      }

      .login-page
      {
        width: 360px;
        padding: 8% 0 0;
        margin: auto;
      }

      .form
      {
        position: relative;
        z-index: 1;
        background: #FFFFFF;
        max-width: 360px;
        margin: 0 auto 100px;
        padding: 45px;
        text-align: center;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
      }

      .form input
      {
        font-family: "Roboto", sans-serif;
        outline: 0;
        background: #f2f2f2;
        width: 100%;
        border: 0;
        margin: 0 0 15px;
        padding: 15px;
        box-sizing: border-box;
        font-size: 14px;
      }

      .form button
      {
        font-family: "Roboto", sans-serif;
        text-transform: uppercase;
        outline: 0;
        background: #4778b7;
        width: 100%;
        border: 0;
        padding: 15px;
        color: #FFFFFF;
        font-size: 14px;
        -webkit-transition: all 0.3 ease;
        transition: all 0.3 ease;
        cursor: pointer;
      }

      .form button:hover,.form button:active,.form button:focus
      {
        background: #4778b7;
      }

      .form .message
      {
        margin: 15px 0 0;
        color: #b3b3b3;
        font-size: 12px;
      }

      .form .message a
      {
        color: #4CAF50;
        text-decoration: none;
      }

      .form .register-form
      {
        display: none;
      }

      .container
      {
        position: relative;
        z-index: 1;
        max-width: 300px;
        margin: 0 auto;
      }

      .container:before, .container:after
      {
        content: "";
        display: block;
        clear: both;
      }

      .container .info
      {
        margin: 50px auto;
        text-align: center;
      }

      .container .info h1
      {
        margin: 0 0 15px;
        padding: 0;
        font-size: 36px;
        font-weight: 300;
        color: #1a1a1a;
      }

      .container .info span
      {
        color: #4d4d4d;
        font-size: 12px;
      }

      .container .info span a
      {
        color: #000000;
        text-decoration: none;
      }

      .container .info span .fa
      {
        color: #EF3B3A;
      }

      body
      {
        background: #4778b7; /* fallback for old browsers */
        background: -webkit-linear-gradient(right, #4778b7, #4778b7);
        background: -moz-linear-gradient(right, #4778b7, #4778b7);
        background: -o-linear-gradient(right, #4778b7, #4778b7);
        background: linear-gradient(to left, #4778b7, #4778b7);
        font-family: "Roboto", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      .row.no-gutter {
      margin-left: 0;
      margin-right: 0;
    }

    .row.no-gutter [class*='col-']:not(:first-child),
    .row.no-gutter [class*='col-']:not(:last-child) {
      padding-right: 0;
      padding-left: 0;
    }

      </style>


      <div id="grid" class="container-fluid">
            <div class="row no-gutter">
                <div class="col-md-2">
                    <ul id="column_1">
                        <div class="list-group"></div>
                    </ul>
                </div>
                <div class="col-md-2 ">

                    <ul id="column_2">
                        <div class="list-group"></div>
                    </ul>
                </div>
                <div class="col-md-2 ">
                    <ul id="column_3">
                        <div class="list-group"></div>
                    </ul>
                </div>
                <div class="col-md-2 ">

                    <ul id="column_4">
                        <div class="list-group"></div>
                    </ul>
                </div>
                <div class="col-md-2">

                    <ul id="column_5">
                        <div class="list-group"></div>
                    </ul>
                </div>
            </div>
        </div>

<script>
  document.getElementById("column_1").innerHTML = "";
            document.getElementById("column_1").innerHTML="<span style='color:#FFFFFF'> Account Group </span>";

            for (prop = 0; prop < 10; prop++)

            {

                document.getElementById('column_1').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">' + prop + '</button></div>';
            }

            function myFunction2(e)
            {

                test = e;
                console.log(e);
                document.getElementById("column_2").innerHTML = "";
                document.getElementById("column_2").innerHTML="<span style='color:#FFFFFF'> GL Accounts </span>";
                document.getElementById("column_3").innerHTML = "";
                document.getElementById("column_3").innerHTML="<span style='color:#FFFFFF'> GL Balance </span>";
                document.getElementById("column_4").innerHTML = "";
                document.getElementById("column_4").innerHTML="<span style='color:#FFFFFF'> GL Name </span>";
                document.getElementById("column_5").innerHTML = "";


                for (prop3 = 0; prop3 < 20; prop3++)
                {
                  document.getElementById('column_2').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)">' +  e + '</button></div>';
                  document.getElementById('column_3').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)">' +  e + '</button></div>';
                  document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)">' +  e + '</button></div>';



                }
            }

            function myFunction4(e)
            {
                test = e;
                console.log(e);
                document.getElementById("column_5").innerHTML = "";
                document.getElementById("column_5").innerHTML="<span style='color:#FFFFFF'> Breakdown </span>";
                for (prop5 = 0; prop5 < 5; prop5++)
                {
                    document.getElementById('column_5').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop5 + '  class="list-group-item" onclick="myFunction5(this.id)">' +  "Breakdown " + prop5 + '</button></div>';
                }
            }

            function myFunction5(e)
            {
                test = e;
                console.log(e);
                window.open("", "", "width=500,height=500");
            }


        </script>

@导入url(https://fonts.googleapis.com/css?family=Roboto:300);
.ui效果转移
{
边框：2件
灰色斑点；
}
.登录页面
{
宽度：360px；
填充：8%0；
保证金：自动；
}
.表格
{
位置：相对位置；
z指数：1；
背景：#FFFFFF；
最大宽度：360px；
保证金：0自动100px；
填充：45px；
文本对齐：居中；
长方体阴影：0 0 20px 0 rgba（0,0,0,0.2），0 5px 5px 0 rgba（0,0,0,0.24）；
}
.表格输入
{
字体系列：“Roboto”，无衬线；
大纲：0；
背景#f2f2；
宽度：100%；
边界：0；
利润率：0.15px；
填充：15px；
框大小：边框框；
字体大小：14px；
}
.表格按钮
{
字体系列：“Roboto”，无衬线；
文本转换：大写；
大纲：0；
背景：#4778b7；
宽度：100%；
边界：0；
填充：15px；
颜色：#FFFFFF；
字体大小：14px；
-webkit过渡：所有0.3易用性；
过渡：全部0.3缓；
光标：指针；
}
.窗体按钮：悬停，.窗体按钮：活动，.窗体按钮：焦点
{
背景：#4778b7；
}
.表格.留言
{
利润率：15px0；
颜色：#B3；
字体大小：12px；
}
.表格.留言
{
颜色：#4CAF50；
文字装饰：无；
}
.表格.登记表格
{
显示：无；
}
.集装箱
{
位置：相对位置；
z指数：1；
最大宽度：300px；
保证金：0自动；
}
.container:之前，.container:之后
{
内容：“；
显示：块；
明确：两者皆有；
}
.container.info
{
保证金：50px自动；
文本对齐：居中；
}
.container.info h1
{
利润率：0.15px；
填充：0；
字体大小：36px；
字体大小：300；
颜色：#1A1A；
}
.container.info span
{
颜色：#4d；
字体大小：12px；
}
.container.info span a
{
颜色：#000000；
文字装饰：无；
}
.container.info span.fa
{
颜色：#EF3B3A；
}
身体
{
背景：#4778b7；/*旧浏览器的回退*/
背景：-webkit线性梯度（右，#4778b7，#4778b7）；
背景：-莫兹线性梯度（右，#4778b7，#4778b7）；
背景：-o-线性梯度（右，#4778b7，#4778b7）；
背景：线性梯度（向左，#4778b7，#4778b7）；
字体系列：“Roboto”，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
.第二排{
左边距：0；
右边距：0；
}
.row.no-gotter[class*='col-']：非（：第一个子级），
.row.no-gotter[class*='col-']：非（：最后一个子级）{
右边填充：0；
左侧填充：0；
}










document.getElementById（“第1列”）.innerHTML=“”；
document.getElementById（“column_1”）.innerHTML=“账户组”；
用于（prop=0；prop<10；prop++）
{
document.getElementById（'column_1'）。innerHTML+=''+prop+''；
}
功能myFunction2（e）
{
试验=e；
控制台日志（e）；
document.getElementById（“第2列”）.innerHTML=“”；
document.getElementById（“column_2”）.innerHTML=“总账账户”；
document.getElementById（“第3列”）.innerHTML=“”；
document.getElementById（“第3列”）.innerHTML=“总账余额”；
document.getElementById（“第四列”）.innerHTML=“”；
document.getElementById（“column_4”）.innerHTML=“GL Name”；
document.getElementById（“第5列”）.innerHTML=“”；
对于（prop3=0；prop3<20；prop3++）
{
document.getElementById（'column_2'）。innerHTML+=''+e+''；
document.getElementById（'column_3'）。innerHTML+=''+e+''；
document.getElementById（'column_4'）。innerHTML+=''+e+''；
}
}
功能myFunction4（e）
{
试验=e；
控制台日志（e）；
document.getElementById（“第5列”）.innerHTML=“”；
document.getElementById（“column_5”）.innerHTML=“Breakdown”；
对于（prop5=0；prop5<5；prop5++）
{
document.getElementById（'column_5'）。innerHTML+=''+“细分”+prop5+''；
}
}
功能myFunction5（e）
{
T