ul center unbreackable

by davidxmartins

HTML

<nav id="top-nav">
            <ul>
                <li><a href=#>Home</a></li>
                <li><a href=#>Services</a></li>
                <li><a href=#>Products</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

CSS

html, body {
  margin: 0;
  padding: 0;
}

#top-nav ul {
    list-style-type: none;
    display: table;
    margin: 0;
    padding: 0;
    width: auto;
    min-width: ;
    height: 65px;
    background-color: red;
    margin-left: 50%;
    margin: 0 auto;

}

#top-nav li {
    width: auto;
    display: table-cell;
}

#top-nav li a {
    display: block;
    color: black;
    text-align: center;
    padding: 20px 16px;
    margin: 0;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    background-color: #ccc;
}