Tab panes losing width in Bootstrap 4 - html

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!