Почему крошечный кусок стола обрезается на мобильном телефоне (iPhone X)?

Question

Итак, это страница моего промежуточного сайта: http://seniorsoftball.staging.wpengine.com/schedules/ssusa-winter-national-championships-2018/

Таблицы отлично выглядят на рабочем столе, но на моем телефоне чуть-чуть 3-й таблицы обрезается там, где написано "Brickyard Classic (IN)".

Я попытался исправить, изменив ширину таблицы до менее 100%, но это не сработало.

Вот код этой таблицы:

<div class="row">
  <div class="col-12 col-lg-12">
   <table class="schedules">
    <colgroup>
     <col>
     <col span="3" style="border: none;">
     <col class="outlined">
     </colgroup>
     <tr>
       <th>Time</th>
       <th>#</th>
       <th>Runs</th>
       <th>Team Name</th>
       <th>Field</th>
       <th>#</th>
       <th>Runs</th>
       <th>Team Name</th>
     </tr>
   <tr>
       <td>10:30AM</td>
       <td>3</td>
       <td>&nbsp;</td>
       <td>Suncoast Adidas 50 (FL)</td>
       <td>1</td>
       <td>5</td>
       <td>&nbsp;</td>
       <td>Brickyard Classics (IN)</td>
     </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>  
        <td></td>
        <td></td>
      </tr>
   </table>
<p class="schedules-comments">*space for additional comments*</p>
</div>
</div><!--end of row 3-->

CSS:

.schedules {
   width: 100% !important;
   border-collapse: collapse;
   text-align: center;
}

.schedules th, td {
  border: 1px solid #aaa;
}

Любые намеки на то, почему именно этот конкретный стол обрезается, в то время как другие выглядят хорошо и центрированы?