Выровнять таблицу bootsrap 4.5 по центру

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<div class="container emp-profile">
          <form action="{{route('user_edit')}}" class="user_edit_form" method="POST">
                <div class="row">
                    <div class="col-md-12">
                        <div class="profile-head">
                            <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Info</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">My orders</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="tab-content profile-tab" id="myTabContent">
                          <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                  <table class="table table-borderless align-middle">
                                    <tbody>
                                        <tr>
                                          <td><td>
                                          <td scope="row"><a class="" href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a></td>
                                        </tr>
                                        <tr>
                                          <th scope="row">Name</th>
                                          <td class="userdata">Name</td>
                                          <td class="useredit" style="display:none;"><input name="name" placeholder="name"><td>
                                        </tr>
                                        <tr>
                                          <th scope="row">E-Mail</th>
                                          <td class="userdata">E-Mail</td>
                                          <td class="useredit" style="display:none;"><input name="E-MAIL" placeholder="E-Mail"><td>
                                        </tr>
                                        <tr>
                                          <th scope="row">Phone</th>
                                          <td class="userdata">5555555</td>
                                          <td class="useredit" style="display:none;"><input name="phone" placeholder="phone"><td>
                                        </tr>
                                        <tr>
                                          <td></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </div>
                            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                  <table class="table">
                                    <thead>
                                      <tr>
                                        <th scope="col">Name</th>
                                        <th scope="col">Qty</th>
                                        <th scope="col">Price</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                      @foreach($orders as $order)
                                        @foreach($order->cart->items as $item)
                                      <tr>
                                        <th scope="row"><a href="/{{$item['code_cat']}}/{{$item['url_cat']}}/{{$item['prod_url']}}"><img class="basketimg mr-1" src="/img/products/{{$item['img']}}"><span class="basket-prod-name">{{$item['name']}}</span></a></th>
                                        <td><div class="prodcount">{{$item['qty']}}</div></td>
                                        <td>{{$item['cost']}}$</td>
                                      </tr>
                                        @endforeach
                                      @endforeach
                                    </tbody>
                                  </table>
                            </div>
                        </div>
                    </div>
                </div>
              </form>
        </div>
<script>
$(document).ready(function(){
  $('.fas.fa-edit').click(function(e){
e.preventDefault();
  $('.useredit, .fas.fa-times').show();
  $('.fas.fa-edit, .userdata').hide();
});
  $('.fas.fa-times').click(function(e){
e.preventDefault();
  $('.useredit, .fas.fa-times').hide();
  $('.fas.fa-edit, .userdata').show();
});
  $("input[name=userimg]").change(function() {
$(".user_edit_form").submit();
  });
});

</script>

Есть страница с двумя вкладками. На одной данные пользователя, на другой его заказы. Заказы, хоть не точно, но выровнялись по центру, а данные пользователя почему то слева. Там все через сетку бустрапа, поэтому пытался менять это значение, добавлять justify-content-center, кое как, но все равно криво выравнивалось. Есть идеи как по ставить идеально по центру? Да и еще чтобы вот эти белые края по бокам убирались?

Вкладка заказы.My orders.

Вкладка с информацией пользователя.Users' data.


Ответы (0 шт):