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

before displaying 2 kinds of information in site1 1 below other.

1)product description 2)packaging

now displaying information in site2 tabs. after displaying tabs. not displaying information in full width, can see white space displaying in right side of information.

i want remove white space , display in site1 once 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> 

just add below css

.tab-text{     width:100%;     padding:0;  }