（在标签菜单中）第二个标签中的元素从第一个标签中的元素结束处开始，我要在第二个标签中删除空的空间

Question

我希望第二个标签中的元素从左上角开始，而不是从第一个标签中元素结束的点开始。

有一些例子- https://ibb.co/F6VdJhz https://ibb.co/qY8PSQH

有一个代码：     

    <ul class="nav nav-tabs" id="menu" role="tablist">
        <li class="nav-item">
            <h3> <a class="nav-link active" id="main-tab" data-toggle="tab" href="#main" role="tab" aria-controls="main" aria-selected="true">Classic</a> </h3>
        </li>
        <li style="padding-left: 30px;" class="nav-item">
            <h3> <a class="nav-link" id="extra-tab" data-toggle="tab" href="#extra" role="tab" aria-controls="extra" aria-selected="false">Extra</a> </h3>
        </li>
     </ul>

    <div class="tab-content" id="menuContent">
         <div class="tab-pane fade show active" id="main" role="tabpanel" aria-labelledby="main-tab">

                 <button  class="product_button col-md-3"  v-bind:class="[ product.id == current_product ? 'active' : '', product.group_id % 2 ? 'btn-default':'btn-warning']" v-for="product in groups_list_parsed[0].productsHas" @click.prevent="showVarieties(product)">  
                                       @{{ product.name }}
                   </button>    

         </div>
        <div class="tab-pane fade" id="extra" role="tabpanel" aria-labelledby="extra-tab">


                  <button  class="product_button col-md-3"  v-bind:class="[ product.id == current_product ? 'active' : '', product.group_id % 2 ? 'btn-default':'btn-warning']" v-for="product in groups_list_parsed[1].productsHas" @click.prevent="showVarieties(product)">  
                                       @{{ product.name }}
                   </button>    


        </div>

    </div>    

</div>