Center Bootstrap li elements on center of responsive page - html

Question

I am trying to get all of the elements in the navbar to always display in the center of the navbar and thus the center of the page, but still they are pulling to the left. When I remove my bootstrap libary, they are centered, so there is a conflict somewhere but I am not sure what and I want to use bootstrap.
My custom CSS is also linked AFTER the bootstrap one.
Any great is greatly appreciated.
HTML:
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</div>
CSS:
.navbar {
margin-bottom: 0px;
border-radius: 0px;
}
.nav {
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li {
display:inline;
}
.nav a {
display:inline-block;
padding:10px;
}
.navbar-default {
background: #900000;
border: none;
}

Answer 1

By default, Bootstrap's css floats .navbar-nav to the left. Hence:
#media (min-width: 768px)
.navbar-nav {
float: left;
margin: 0;
}
You need to overwrite this property. I suggest giving a unique class maybe like .myNav and resetting this float. Also adding a display:inline-block
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="container">
<ul class="nav navbar-nav myNav">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</div>
CSS:
.myNav{
float:none;
display:inline-block;
}
Finally, add a text-align:center to the wrapping navbar element to center the content inside
.navbar {
margin-bottom: 0px;
border-radius: 0px;
text-align:center;
}

Answer 2

Here is a possible solution:
HTML:
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="container">
<ul class="nav navbar-nav navbar-center">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</div>
CSS:
.navbar {
margin-bottom: 0px;
border-radius: 0px;
}
.navbar-center {
width: 100%;
margin: 0 auto;
text-align: center;
text-align:center;
}
.nav li {
display:inline-block;
float: none;
}
.nav a {
padding:10px;
}
.navbar-default {
background: #900000;
border: none;
}
Fiddle: https://jsfiddle.net/j2ska9ym/