How do I center the nav items in the collapsable menu nav - html

Question

I'm trying to center the nav-items text in the collapsable menu ,
but for some reason when I select .nav-item in css , with text-align
center , it doesn't work ,
what am I doing wrong ? I've also tried doing text-align on .navbar-nav but it still doesn't center the text ?
#media screen and (max-width: 767px) {
.nav-item-logout {
position: relative;
top: 20px;
right: 0;
font-family: 'Saira', sans-serif;
font-size: 20px;
color: rgb(223, 250, 250);
padding: 5px;
width: 25%;
}
.menu {
background-color: transparent;
border: none;
cursor: pointer;
display: block;
padding: 0;
float: right;
top: 10px;
position: relative;
}
}
<nav class="navbar navbar-expand-md navbar-dark bg-dark large_navbar">
<div class="container1">
<a class="navbar-brand ml-4 mr-4" href="#"><b>Future Sounds</b></a>
<button class="menu" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" onclick="this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened'))" aria-label="Toggle navigation">
<svg width="50" height="50" viewBox="0 0 100 100">
<path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
<path class="line line2" d="M 20,50 H 80" />
<path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
</svg>
</button>
<div class="collapse navbar-collapse menu_nav" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item" href="{% url 'home' %}">HOME</a>
<a class="nav-item" href="{% url 'users_list' %}">ADD NEW FRIENDS</a>
{% if user.is_authenticated %}
<a class="nav-item" href="{% url 'friend_list' %}">FRIENDS</a>
<a class="nav-item" href="{% url 'my_profile' %}">PROFILE</a>
<a class="nav-item" href="{% url 'post-create' %}">CREATE POST</a>
<a class="nav-item-logout auth_buttons btn btn-danger" href="{% url 'logout' %}">LOGOUT</a>
{% else %}
<a class="nav-item auth_buttons btn btn-success text-light" href="{% url 'login' %}">LOGIN</a>
<a class="nav-item auth_buttons btn btn-info text-light" href="{% url 'register' %} ">REGISTER</a>
{% endif %}
{% block searchform %}{% endblock searchform %}
</div>
</div>
</div>
</nav>
<div class="container">
{% block content %}{% endblock content %}
</div>
<footer class="page-footer font-small black">
<div class="footer-copyright text-center py-3">Future Sounds © 2020
<br><small class="text-muted">All rights reserved!</small>
</div>
</footer>

Answer 1

What about extend the container1 on the entire page (<div class="container1 w-100">) and then center your menu_nav (<div class="collapse navbar-collapse menu_nav w-100 d-flex justify-content-center" id="navbarNavAltMarkup">)?

Answer 2

I found the problem , it was another .nav-item command I had in css , where I had set the width to 25%, I changed this to 100% and now I'm able to center the nav-item links