I've been trying various methods but haven't been able to center it while keeping the padding intact. It's a mobile navigation bar.
Here is what my code is producing currently: [1]: https://i.sstatic.net/sHEjj.png
This is how I want it to appear: [1]: https://i.sstatic.net/yNiCz.png
Thank you in advance!
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
}
header nav ul li {
display: inline-block;
float: left;
list-style: none;
padding: 10px 20px;
}
header nav ul li a {
font-family: Segoe UI;
color: #777777;
font-size: 24px;
}<nav>
<ul>
<li><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'movies' %}">Movies</a></li>
<li><a href="{% url 'about' %}">About</a></li>
{% if user.is_authenticated %}
<li><a href="{% url 'my_account' %}">My Account</a></li>
{% else %}
<li><a href="{% url 'login' %}">Log in</a></li>
<li><a href="{% url 'signup' %}">Sign up</a></li>
{% endif %}
</ul>
</nav>