How do I center the contents of an horizontal navigation bar with HTML and CSS

Question

I want to center perfectly the contents of my navigation bar but i can't. This is the code:

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: rgb(23, 5, 87);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

li {
  float: left;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: auto;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  margin: auto;
}

li a:hover {
  background-color: rgb(153, 255, 179);
  color: black;
}

<ul>
  <li style="float:left"><img src="images/huebo.png" width="28%" height="28%"></li>
  <li><a style="center" href="4a.html">Prueba</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
  <pl><a class="active" href="4a.html">&#8801</a></pl>
</ul>

I tried margin: auto; and display: inline; but didn't work.

Answer 1

This is one of the many possible solutions:

#container {
  position: relative;
  background-color: rgb(23, 5, 87);
  width: 100%;
  overflow: auto;
  height: 52px;
}

ul {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  list-style-type: none;
  padding: 0;
  margin: 0;
}
      
li {
  float: left;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 0px 16px;
  line-height: 52px;
  text-decoration: none;
  margin:auto;
}

li a:hover {
  background-color: rgb(153, 255, 179);
  color:black;
 }

<div id="container">
  <ul>
                <li><img src="images/huebo.png" width="28%" height="28%"></li>
                <li><a style="center" href="4a.html">Prueba</a></li>
                <li><a href="news.asp">News</a></li>
                <li><a href="contact.asp">Contact</a></li>
                <li><a href="about.asp">About</a></li>
                <pl><a class="active" href="4a.html">&#8801</a></pl>
    </ul>
</div>
  

Answer 2

add display: flex into the ul

     ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
        background-color: rgb(23, 5, 87);
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        display: flex;
      }

Answer 3

My suggestion here is to wrap the ul in a div

.container {
    display: flex;
    justify-content: center;
    background-color: rgb(23, 5, 87);
}

.container ul {
    display: inline-block;
    margin: 10px 0;
    padding: 2px;
}

.container li {
    display: inline-block;
}
.container li a {
    display: inline-block;
    color: #FFF;
    padding: 5px;
    text-decoration: none;
}

.container li a:hover {
  background-color: rgb(153, 255, 179);
  color: black;
}

<div class="container">
  <ul>
    <li><a href="#">Prueba</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>