menu responsivo

oi, estou desenvolvendo abas de navegação utilizando bootstrap, porém gostaria de tornar ele responsivo pois as abas não se alinham em telas menores e as abas ficam bagunçadas.

segue código abaixo:

em html:

<div class="row">
 <div class="col-lg-12">

 <h3 class="page-header">Central de ajuda</h3>
 </div>
 </div>

 <div class="row">
 <div class="col-lg-12">
 <ul class="nav nav-tabs round" id="#" role="tablist">
 <li class="active">
 <a id="tutorial-tab" data-toggle="tab" href="#tutorial" role="tab" aria-controls="tutorial" aria-selected="true"><span><i class="fas fa-book-reader"></i> Tutorial</a> </span>
 </li>
 <li>
 <a id="tarefa-tab" data-toggle="tab" href="#tarefa" role="tab" aria-controls="tarefa" aria-selected="false"> <span><i class=" fa fa-list-alt"></i> Tarefa</a>
 </li></span>
 <li>
 <a id="sugestao-tab" data-toggle="tab" href="#sugestao" role="tab" aria-controls="sugestao" aria-selected="false"><span> <i class="fa fa-lightbulb-o"></i> Sugestão</a></span>
 </li>
 <li>
 <a id="faq-tab" data-toggle="tab" href="#faq" role="tab" aria-controls="faq" aria-selected="true"><span><i class=" fa fa-search"></i> FAQ</a> </span>
 </li>
</ul>
</div>

	 css: 

	 

.nav-tabs {
 border-bottom: 1px solid var(--cor-primaria);
 overflow: hidden;
 transition: border 250ms ease;
}

.nav-tabs > li {

 margin: 0px;
 padding: 0px;
 float: left;
 padding-left: 48px;
 list-style-type: none;

}

.nav-tabs >li *{

 margin: 0px;
 padding: 0px;
}

.nav-tabs > li > a {

 margin-right: 2px;
 line-height: 1.42857143;
 display: block;
 float: right;
 padding: 10px 24px 8px;
 background-color: #f2f2f2;
 z-index: 2;
 position: relative;
 color: #666666;
 text-transform: uppercase;
 transition: all 250ms ease;
 border-top: 0.5px solid rgba(204, 204, 204, 0.1803921568627451);
}

.nav-tabs > li > a:before,
.nav-tabs > li > a:after{

 display: block;
 content: " ";
 position: absolute;
 top: 0;
 height: 100%;
 width: 44px;
 background-color:#f2f2f2;
 transition: all 250ms ease;
 }
 .nav-tabs > li > a:before {
 right: -24px;
 transform: skew(30deg, 0deg);
 box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;
 border-top: 0.5px solid rgba(204, 204, 204, 0.1803921568627451);
 }
 .nav-tabs > li > a:after {
 left: -24px;
 transform: skew(-30deg, 0deg);
 box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
 border-top: 0.5px solid rgba(204, 204, 204, 0.1803921568627451);
 }

 .nav-tabs > li > a:hover,
 .nav-tabs > li > a:hover:before,
 .nav-tabs > li > a:hover:after {
 background-color: var(--cor-primaria);
 color: #fff;
 border-top: 0px;
 }
 .nav-tabs >li.active > a{
 z-index: 3;
 }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:before,
.nav-tabs > li.active > a:after {

 color: #fff;
 background-color: var(--cor-primaria);
 cursor: default;
 font-weight: 700;
 border-top: 0px;
}

/ Round Tabs /
.nav-tabs.round >li > a{

 border-radius: 8px 8px 0 0;
}

.nav-tabs.round > li > a:before {

 border-radius: 0 8px 0 0;

}

.nav-tabs.round > li > a:after {

 border-radius: 8px 0 0 0;

}

	 tbm já tentei fazer utilizando o @media porém não ajusta certinho. poderia me dar essa ajuda.