white space is displaying after we added tabs in page - html

Question

before we are displaying 2 kinds of information in site1 one below the other.
1)Product Description 2)Packaging
now we are displaying information in site2 as tabs. after we displaying as tabs. Its not displaying information in full width, you can see white space displaying in right side of information.
I want to remove those white space and display as in site1 once we click on tabs.
.tabs{
display:inline-block;
width:250px;
height:45px;
line-height:45px;
cursor:pointer;
background:orange;
color:white;
font-size:19px;
text-align:center;
}
.tabs:hover{
text-decoration:underline;
}
.tabs.active{
cursor:default;
}
.tabs.active:hover{
text-decoration:none;
}
.tab-text{
display:none;
width:90%;
height:auto;
padding:5%;
}
.tab-text.active{
display:block;
}
phtml
<div id="tab-container">
<div class="tabs active" onclick="changeTab(0)">Product Description</div>
<div class="tabs" onclick="changeTab(1)">Features</div>
<div id="tab-1" class="tab-text active">
<div class="next-content-product">
<h1>Product Description </h1>
<?php echo $_product->getDescription();?>
<div class="size-space">
<h1>Product Size & Space <span class="hidden-sku"><?php echo $_product->getSku();?></span> </h1>
<?php echo $attribute_value = $_product->getData('size_space');?>
</div>
</div>
</div>
<div id="tab-2" class="tab-text">
<div class="next-level-content-product">
<div class="interior-exterior">
<?php echo $attribute_value = $_product->getData('interior_exterior');?>
</div>
</div>
</div>
</div>

Answer 1

Just add below css
.tab-text{
width:100%;
padding:0;
}

Answer 2

You could just remove the width: 90% from .tab-text, this is basically the reason of your problem

Answer 3

.tab-text.active {
display: initial;
}
use this for full display.