how do I center the nav with 3 elements(lists) max in a row [responsive style]

Question

I've tried multiple ways but couldn't center it without removing the padding it's a mobile navbar

This is what it looks like right now with my code: [1]: https://i.stack.imgur.com/sHEjj.png

This is what it should look like: [1]: https://i.stack.imgur.com/yNiCz.png

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

score 1 · Accepted Answer · answered Apr 05 '20 at 02:47

Instead of display: block, you can use a flexbox layout. So, add display: flex to the <ul> element, justify-content: center to center it and flex-wrap: wrap, so the items will not stay in the same line since this is the default behaviour.

header nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
  width: fit-content;
}

how do I center the nav with 3 elements(lists) max in a row [responsive style]

1 Answers1