Boostrap center nav items - html

Question

Hello I'd like to ask how i can center, these thing: Home, forum, stats, etc.. to center of screen. I've tried many functions but no one of these were working for me. And second problem is that background border button, when i point at text, with button texting gonna move to right. screen
Thanks for some advices.
.navbar-default {
background-color: rgb(48, 48, 48);
}
.navbar-nav {
font-size: 20px
}
.custom-toggler {
border-color: white;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='-9 0 35 33' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.nav-tabs>li>a:hover {
background-color: purple !important;
border: medium none;
border-radius: 0;
color: #fff;
}
.nav-item {
color: white;
font-size: 22px;
display: block;
}
.nav-item:hover {
border-radius: 12px;
background: rgb(80, 80, 80);
padding: 5px;
width: 100px;
height: 50px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-default navbar-custom ">
<a class="navbar-brand" href="http://nextron.fakaheda.eu">
<img src="http://nextron.fakaheda.eu/img/nextron.png" alt="Nextron Logo" width="155" height="43">
</a>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="nav navbar-nav">
<li class="text"><a class="nav-item nav-link" style="color:white" href="#">Home</a></li>
<li class="text"><a class="nav-item nav-link" style="color:white" href="#">Forum</a></li>
<li class="text"><a class="nav-item nav-link" style="color:white" href="#">Banlist</a></li>
<li class="text"><a class="nav-item nav-link" style="color:white" href="#">Servers</a></li>
<li class="text"><a class="nav-item nav-link" style="color:white" href="#">Statistics</a></li>
<li class="text"><a class="nav-item nav-link" style="color:white" href="#">VIP</a></li>
</ul>
</div>
</nav>

Answer 1

In order to center nav-item use class of mx-auto to align them center. To View Output open result in new tab (full screen)
I have also overwrite bootstrap class of .navbar-nav
.navbar-nav {
font-size: 20px;
width:75% !important;
display:flex !important;
justify-content:space-evenly !important;
align-items:center !important;
}
.navbar-default {
background-color: rgb(48, 48, 48);
}
.navbar-nav {
font-size: 20px;
width:75% !important;
display:flex !important;
justify-content:space-evenly !important;
align-items:center !important;
}
.custom-toggler {
border-color: white;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='-9 0 35 33' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.nav-tabs>li>a:hover {
background-color: purple !important;
border: medium none;
border-radius: 0;
color: #fff;
}
.nav-item {
color: white;
font-size: 22px;
display: block;
}
.nav-item:hover {
border-radius: 12px;
background: rgb(80, 80, 80);
padding: 5px;
width: 100px;
height: 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-default navbar-custom ">
<a class="navbar-brand" href="http://nextron.fakaheda.eu">
<img src="http://nextron.fakaheda.eu/img/nextron.png" alt="Nextron Logo" width="155" height="43">
</a>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="nav navbar-nav mx-auto">
<li class="text"><a class="nav-item nav-link" style="color:white" href="#">Home</a></li>
<li class="text"><a class="nav-item nav-link" style="color:white" href="#">Forum</a></li>
<li class="text"><a class="nav-item nav-link" style="color:white" href="#">Banlist</a></li>
<li class="text"><a class="nav-item nav-link" style="color:white" href="#">Servers</a></li>
<li class="text"><a class="nav-item nav-link" style="color:white" href="#">Statistics</a></li>
<li class="text"><a class="nav-item nav-link" style="color:white" href="#">VIP</a></li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>