A CodePen by Francisco Campos. .css file .center ul uses a: fit-content to horizontally center a floated navgiation on a page.

index.html

<div class="navbar center">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/">About Us</a></li>
    <li><a href="/">Our Products</a></li>
    <li><a href="/">Customer Suppot</a></li>
    <li><a href="/">Contact</a></li>

style.css

.center ul {
 width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;
  
}

.navbar ul li{
  float: left;
  padding: 5px;
}
.navbar li a {
 text-decoration: none;
  color: #262728;
  font: 400 18px/1.4 "Century Gothic", Helvetica, sans-serif;
  transition: 0.1s; /*applies transition to the underline hover as well*/
}

.navbar a:hover {
 color: red;
  border-bottom: 3px solid red;
}