Tab panes losing width in Bootstrap 4

Question

I've created tabbed content in my project with three tabs. For each tab pane, the pane loses width. For example the first tab pane is the full 100% width, however each pane onwards loses 100-200px consecutively.

For example:

• The first pane is 1140px (full width of the container)
• The second pane is: 1004px width
• The third pane is: 794px width

I've checked for missing divs and I don't believe the use of rows and columns within the tab panes is the cause of the issue. I've also tried setting width: 100% to the tab panes with no luck.

I can't understand why this is happening.

<section class="home-office-types">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <ul class="nav nav-tabs home-office-types__tabs" id="myTab" role="tablist">
          <li class="nav-item home-office-types__tab">
            <a class="nav-link home-office-types__tab-link active" id="managed-offices-tab" data-toggle="tab" href="#managed-offices" role="tab"
              aria-controls="managed-offices" aria-selected="true">Serviced & managed offices</a>
          </li>
          <li class="nav-item home-office-types__tab">
            <a class="nav-link home-office-types__tab-link" id="meeting-rooms-tab" data-toggle="tab" href="#meeting-rooms" role="tab"
              aria-controls="meeting-rooms" aria-selected="true">Meeting Rooms</a>
          </li>
          <li class="nav-item home-office-types__tab">
            <a class="nav-link home-office-types__tab-link" id="virtual-offices-tab" data-toggle="tab" href="#virtual-offices" role="tab"
              aria-controls="virtual-offices" aria-selected="true">Virtual Offices</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="tab-content home-office-types__content" id="myTabContent">
        <div class="tab-pane fade show active" id="managed-offices" role="tabpanel"
          aria-labelledby="managed-offices-tab">
          <div class="row">
            <div class="col-lg-7 d-flex justify-content-start">
              <ul>
                <li>State of the art internet & phone packages</li>
                <li>Fully furnished and ready for you to move in and make your home</li>
                <li>No hidden costs - your monthly fee covers everything from all your utilities to cleaning</li>
                <li>Great value and truly affordable prices</li>
                <li>No long contracts - choose from a few days to as long as you want giving you total control of your business’ finances</li>
              </ul>
            </div>
            <div class="col-lg-5 d-flex justify-content-end">
              <img class="home-office-types__image img-fluid" src="https://placehold.co/304x304" alt="">
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="meeting-rooms" role="tabpanel" aria-labelledby="meeting-rooms-tab">
          <div class="row">
            <div class="col-lg-7 d-flex justify-content-start">
              <ul>
                <li>State of the art internet & phone packages</li>
                <li>Fully furnished and ready for you to move in and make your home</li>
              </ul>
            </div>
            <div class="col-lg-5 d-flex justify-content-end">
              <img class="home-office-types__image img-fluid" src="https://placehold.co/304x304" alt="">
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="virtual-offices" role="tabpanel" aria-labelledby="virtual-offices-tab">
          <div class="row">
            <div class="col-lg-7 d-flex justify-content-start">
              <ul>
                <li>State of the art internet & phone packages</li>
              </ul>
            </div>
            <div class="col-lg-5 d-flex justify-content-end">
              <img class="home-office-types__image img-fluid" src="https://placehold.co/304x304" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Below is the JS Fiddle:

https://jsfiddle.net/graeme95/qo6tj819/2/

Answer 1

.tab-content {
  width: 100%; 
}

Also noticed that your grid only starts at lg. Mobile first!