How to align navbar to center

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

Give display:inline-block to li and text-align:center; padding:0; 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> <a href="javascript:void(0);">Home</a> </li> <li> <a href="results.html">About</a> </li> <li> <a href="javascript:void(0);">Packages</a> </li> <li> <a href="javascript:void(0);">Destination</a> </li> <li> <a href="javascript:void(0);">Gallery</a> </li> <li> <a href="javascript:void(0);">Blog</a> </li> <li> <a href="javascript:void(0);">Contact us</a> </li> </ul> </div> </nav> 

Answer 2

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 3

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 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