HTML Кнопка переполнения

Question

У меня проблемы с переполнением кнопок.

Пример: https://i.imgur.com/UHjJEOe.png

, как вы можете видеть, кнопка C и D появляются вне контейнера и кнопки. Есть ли способ "обернуть" кнопки вне контейнера (как текст)?

Важно знать, что это через форум. Это означает, что у меня нет доступа к CSS или сценариям. Версия HTML также старше, чем HTML5, поэтому такие вещи, как <font>, все еще работают.

Вот код, который у меня есть.

<div class="container-fluid px-0"  style="max-width: 1100px; letter-spacing: .45px;">

  <div class="row">


    <!-- NAV BUTTONS -->

    <div class="col-md-8 pr-lg-0 mb-3">

      <div class="rounded bg-faded">

        <div class="card-block">

          <ul class="nav nav-tabs card-header-tabs text-center text-uppercase" style="letter-spacing: 1px;">

            <li class="nav-item col mb-2"><a class="nav-link nav-justified btn btn-important border-0 btn-sm m-1" data-toggle="tab" href="#tab-one">Button A</a></li>

            <li class="nav-item col mb-2"><a class="nav-link nav-justified btn btn-important border-0 btn-sm m-1" data-toggle  ="tab" href="#tab-two">Button B</a></li>

            <li class="nav-item col mb-2"><a class="nav-link nav-justified btn btn-important border-0 btn-sm m-1" data-toggle="tab" href="#tab-three">Button C</a></li>

            <li class="nav-item col mb-2"><a class="nav-link nav-justified btn btn-important border-0 btn-sm m-1" data-toggle="tab" href="#tab-four">Button D</a></li>

          </ul>

    <hr class="mx-auto">

    <div class="rounded tab-content">



      <div class="tab-pane fade in active show card-block pb-1" style="overflow:auto;" data-toggle="tab" id="tab-one">

        <div class="px-4 pt-3 pb-1" style="overflow: scroll;">

          PLACEHOLDER TEXT 1

       </div>

      </div>

      <div class="tab-pane fade in card-block pb-1" style="overflow:scroll;" data-toggle="tab" id="tab-two">

        <div class="px-4 pt-3 pb-1" style="overflow: auto;">

          PLACEHOLDER TEXT 2

       </div>

      </div>

      <div class="tab-pane fade in card-block pb-1" style="overflow:scroll;" data-toggle="tab" id="tab-three">

        <div class="px-4 pt-3 pb-1" style="overflow: auto;">

          PLACEHOLDER TEXT 3

       </div>

      </div>

      <div class="tab-pane fade in card-block pb-1" style="overflow:scroll;" data-toggle="tab" id="tab-four">

        <div class="px-4 pt-3 pb-1" style="overflow: auto;">

          PLACEHOLDER TEXT 4

       </div>

      </div>

    </div>


      </div>

    </div>



  </div>

</div>

Заранее спасибо!