Header align center irrespective of device width in css - html

Question

I am stuck with a css problem where i need to align my header to center irrespective to the device width, i.e for any device the header should appear in center.
Here i am providing the css that is already applied.
ul.nav.nav-tabs{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
margin: 0;
padding: 0;
padding-left: 10px;
}
ul.nav.nav-tabs li{
list-style: none;
margin: 0;
padding: 0;
position: relative;
white-space: wrap;
}
ul.nav.nav-tabs li:last-child:after{
content: "";
background: url("");
}
ul.nav.nav-tabs li.active:after {
background: url(../images/right-chevron-orange.png) center right -3px no-repeat;
background-size: 16px;
}
ul.nav.nav-tabs li:after{
content: "";
background: url(../images/right-chevron.png) center right -3px no-repeat;
width: 20px;
background-size: 16px;
position: absolute;
height: 20px;
right: 6px;
top: 18px;
}
.nav-tabs>li{
width: auto;
height: auto;
margin-bottom: 5px;
}
<ul class="nav nav-tabs ng-scope" id="navigation-tabs" ng-controller="NavCtrl">
<li class="increase_min_width active" ng-class="{active : navPath == 'basic'}">
<div class="wrap">
<span class="circle">1</span>
<a style="text-decoration:none;">Basic Information</a>
</div>
</li>
<li class="increase_min_width disabled" ng-class="{active : navPath == 'company',disabled:moveToCompanyFlg ==''}">
<div class="wrap">
<span class="circle">2</span>
<a style="text-decoration:none;" class="company_information">Company Information</a>
</div>
</li>
<li ng-class="{active : navPath == 'owner',disabled:moveToOwnerFlg ==''}" class="disabled">
<div class="wrap">
<span class="circle">3</span>
<a style="text-decoration:none;">Owners Info</a>
</div>
</li>
</ul>
I have tried setting margin:0 auto; and width:100% for ul.nav.nav-tabs but it doesn't work. I have not much knowledge in css.
Please help me with this... Thank you in advance.

Answer 1

Your flexbox css is incomplete
Add a justify-content: center; to your .nav-tabs

Answer 2

Add justify-content:center; to ul class .nav-tabs
Check this pen
`https://codepen.io/anon/pen/odRMWV`

Answer 3

Add justify-content: center; in the ul.nav.nav-tabs CSS
ul.nav.nav-tabs{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
margin: 0;
padding: 0;
padding-left: 10px;
width: 100%;
justify-content: center;
}
ul.nav.nav-tabs li{
list-style: none;
margin: 0;
padding: 0;
position: relative;
white-space: wrap;
}
ul.nav.nav-tabs li:last-child:after{
content: "";
background: url("");
}
ul.nav.nav-tabs li.active:after {
background: url(../images/right-chevron-orange.png) center right -3px no-repeat;
background-size: 16px;
}
ul.nav.nav-tabs li:after{
content: "";
background: url(../images/right-chevron.png) center right -3px no-repeat;
width: 20px;
background-size: 16px;
position: absolute;
height: 20px;
right: 6px;
top: 18px;
}
.nav-tabs>li{
width: auto;
height: auto;
margin-bottom: 5px;
}
<ul class="nav nav-tabs ng-scope" id="navigation-tabs" ng-controller="NavCtrl">
<li class="increase_min_width active" ng-class="{active : navPath == 'basic'}">
<div class="wrap">
<span class="circle">1</span>
<a style="text-decoration:none;">Basic Information</a>
</div>
</li><br>
<li class="increase_min_width disabled" ng-class="{active : navPath == 'company',disabled:moveToCompanyFlg ==''}">
<div class="wrap">
<span class="circle">2</span>
<a style="text-decoration:none;" class="company_information">Company Information</a>
</div>
</li>
<li ng-class="{active : navPath == 'owner',disabled:moveToOwnerFlg ==''}" class="disabled">
<div class="wrap">
<span class="circle">3</span>
<a style="text-decoration:none;">Owners Info</a>
</div>
</li>
</ul>