Bootstrap nav not centered - html

Question

I have a Bootstrap menu that that is slightly aligned to the left for some reason, I can't debug it. It doesn't have any rows, but the container is fluid and changing this to fixed makes it unresponsive in mobiles.
This is the live example. https://codepen.io/anon/pen/qjKbQM
This is the HTML code:
<nav class="navbar navbar-default" style="border:1px solid red";>
<div class="container-fluid">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">UP</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-th" aria-hidden="true"></span> DEVIS GRATUIT</li>
<li class="dropdown">
Nos Ressource <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Toutes nos ressources
</li>
<li>
Fiches conseils
</li>
<li>
Fiches métiers
</li>
<li>
Foire aux questions
</li>
<li>
Revue de presse
</li>
<li>
Le Blog
</li>
</ul>
</li>
<li class="dropdown">
Nos Fonctionalites <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Toutes nos fonctionnalités
</li>
<li class="">
Mes indicateurs
</li>
<li class="">
Ma comptabilité
</li>
<li class="">
Mes devis et factures
</li>
<li class="">
Mon budget
</li>
<li>
Mon social-RH
</li>
<li class="">
Mon coffre-fort
</li>
</ul>
</li>
<li>Accounts</li>
<li class="dropdown">
Notre Cabinet <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Tout sur notre cabinet
</li>
<li class="">
Qui sommes-nous ?
</li>
<li>
Pourquoi nous choisir ?
</li>
<li>
Comment devenir client ?
</li>
<li>
Notre équipe
</li>
<li>
Vos questions, nos réponses
</li>
<li class="">
Témoignages clients
</li>
<li class="">
Recrutement
</li>
</ul>
</li>
<li class="dropdown">
Nos Solutions <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Toutes nos solutions
</li>
<li class="">
TPE / Consultants
</li>
<li>
Porteurs de projet
</li>
<li>
SCI / Locations meublées
</li>
<li class="">
Paye des salariés
</li>
<li class="">
Professions Libérales
</li>
<li class="">
Associations
</li>
<li class="">
Toutes nos solutions
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div><!-- /.container-fluid -->
</nav>
And this is the css :
.navbar-default {
font-size: 1.15em;
font-weight: 400;
border: 0px;
border-radius: 0px;
background: #021a2f !important;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .navbar-nav>li>a:hover {
color: #cbf0ff;
}
.navbar-default .navbar-brand {
color: #002433;
}
.navbar-default .navbar-brand:hover {
color: #ffffff;
text-shadow: 1px -1px 8px #b3e9ff;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
background-color: #004059;
color: white;
}
.navbar-default .navbar-toggle {
border: none;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border: none;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #002433;
}
.navbar-default .navbar-toggle .icon-bar {
}
.dropdown-menu {
background-color: #004059;
color: white;
border: 0px;
border-radius: 2px;
padding-top: 10px;
padding-bottom: 10px;
}
.dropdown-menu>li>a {
background-color: #004059;
color: white;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background-color: #004059;
color:white;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #003246;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #ffffff;
}
#media (max-width: 767px) {
.dropdown-menu>li>a {
background-color: #006b96;
color: #ffffff;
}
.dropdown-menu>li>a:hover {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
color: #ffffff;
background-color: transparent;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #005577;
}
}
How can I make the menus be centered without loosing the responsiveness of the navbar?

Answer 1

Add below css to get
.nav.customCl {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}
And use this class in following html
<ul class="nav navbar-nav customCl"
codepen link