How to align navbar to center - html

Question

I want to know how to align navbar contents to center , here is the code that i am using . Actually i don't know what is the problem with the code any help would be greatly appreciated.
Fiddle
.tg-navigationarea {
width: 100%;
float: left;
position: relative;
background: #000;
}
.tg-nav {
z-index: 2;
float: left;
text-transform: uppercase;
font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}
.tg-navigation {
width: 100%;
float: left;
padding: 0;
line-height: inherit;
}
.tg-navigation ul {
margin: 0;
list-style: none;
line-height: inherit;
}
.tg-navigation>ul {
width: 100%;
float: left;
}
.tg-navigation ul li {
line-height: inherit;
list-style-type: none;
}

Answer 1

apply this css rule to elemnts
.tg-nav {
z-index: 2;
float: left;
width: 100%;
text-align: center;
font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}
.tg-navigation > ul {
width: auto;
float: none;
display: inline-block;
margin: 0 auto;
}

Answer 2

One of the ways to do this is using flexbox. Adding
display: flex;
justify-content: center;
Will center your navbar, if you remove the width: 100% and the float: left.
Updated Fiddle: https://jsfiddle.net/103kbsh6/5/

Answer 3

Give display:inline-block to li and text-align:center; padding:0; to ul tag.
.tg-navigationarea {
width: 100%;
float: left;
position: relative;
background: #f7f7f7;
}
.tg-nav {
z-index: 2;
float: left;
text-transform: uppercase;
font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}
.tg-navigation {
width: 100%;
float: left;
padding: 0;
line-height: inherit;
}
.tg-navigation ul {
margin: 0;
list-style: none;
line-height: inherit;
}
.tg-navigation > ul {
width: 100%;
float: left;
text-align:center;
padding:0;
}
.tg-navigation ul li {
line-height: inherit;
list-style-type: none;
}
li.menu-item-has-children {
position: relative;
}
li.menu-item-has-mega-menu {
position: static;
}
li.menu-item-has-children > a:before,
li.menu-item-has-mega-menu > a:before {
top: 0;
right: 10px;
content: '\f107';
position: absolute;
font-size: inherit;
line-height: inherit;
font-family: 'FontAwesome';
}
.sub-menu li.menu-item-has-children > a:after {
top: 0;
right: 10px;
content: '\f105';
position: absolute;
font-size: inherit;
line-height: inherit;
font-family: 'FontAwesome';
}
.tg-navigation ul li .sub-menu li.current-menu-item > a {
color: #333;
}
.tg-navigation ul li .sub-menu li.current-menu-item > a:before {
height: 100%;
}
.tg-navigation > ul > li {
display: inline-block;
}
.tg-navigation ul li a {
color: #666;
display: block;
padding: 0 25px;
position: relative;
line-height: inherit;
}
.tg-navigation > ul > li > a {
color: #333;
z-index: 2;
}
.tg-navigation > ul > li:last-child > .sub-menu {
right: 0;
left: auto;
}
.tg-navigation > ul > li:last-child > .sub-menu .sub-menu {
right: 100%;
left: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav id="tg-nav" class="tg-nav">
<div id="tg-navigation" class="navbar-collapse tg-navigation">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Packages
</li>
<li>
Destination
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact us
</li>
</ul>
</div>
</nav>

Answer 4

.tg-navigationarea {
width: 100%;
float: left;
position: relative;
background: #000;
}
.tg-nav {
z-index: 2;
float: left;
text-transform: uppercase;
font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}
.tg-navigation {
width: 100%;
float: left;
padding: 0;
line-height: inherit;
}
.tg-navigation ul {
margin: 0;
list-style: none;
line-height: inherit;
}
.tg-navigation>ul {
width: 100%;
float: left;
Text-align:center
}
.tg-navigation ul li {
line-height: inherit;
list-style-type: none;
float:none;
display:inline-block
}

Answer 5

To center this list, all you need to add is:
.tg-nav {
width: 100%:
}
.tg-navigation {
width: 100%;
}
.tg-navigation ul {
display: inline-block;
}
Besides that, what's up with all the float: left? If you want elements to center, using float: left is what I would avoid, except of course for the list-items.
I updated your FIDDLE