Estoy tratando de crear un nav-tabs dentro de otro nav-tabs

pero cuando intento cambiar de pagina en en segundo nav-tab este no cambia, solo se dejan de ver los datos de la page1 y abajo inmediatamente se muestran los de la page2

En este caso solo se muestran las letras de la page 3 hasta abajo

quisiera saber si alguien sabe como arreglar este error, estoy usando bootstrap 4 y este es de la manera en que lo estoy realizando

<div class="container">     <h2>Product Categories</h2>     <br>     <!-- Nav tabs -->     <ul class="nav nav-tabs" role="tablist">         <li class="nav-item">             <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#home">Friction Products</a>         </li>         <li class="nav-item">             <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu1">Clutches</a>         </li>         <li class="nav-item">             <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu2">Safety</a>         </li>         <li class="nav-item">             <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#home">Production</a>         </li>         <li class="nav-item">             <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu1">Maintenance</a>         </li>         <li class="nav-item">             <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu2">Shear Brake</a>         </li>         <li class="nav-item">             <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu2">Press Controls</a>         </li>     </ul>      <br>      <div class="container">         <!-- Nav tabs -->         <ul class="nav nav-tabs" role="tablist">             <li class="nav-item">                 <a class="nav-link" data-toggle="tab" href="#page1">Page 1</a>             </li>             <li class="nav-item">                 <a class="nav-link" data-toggle="tab" href="#page2">Page 2</a>             </li>             <li class="nav-item">                 <a class="nav-link" data-toggle="tab" href="#page3">Page 3</a>             </li>         </ul>          <div id="page1" class="container tab-pane fade"><br>             <p>lkjasdhfalsdf</p>         </div>          <div id="page2" class="container tab-pane fade"><br>             <p>shbflaksjdflk</p>         </div>          <div id="page3" class="container tab-pane fade"><br>             <p>wertwertgfsd</p>         </div>     </div> </div> 

se que en los nombres de los nav se repiten varias veces, pero aun asi no se desaparecen los nav-tabs de page1 page2 y page3