How to determine nav-items to get full required width automatically - html

Question

I'm working with Bootstrap 3 and I'm trying to make a header navbar. Here is my code:
<div class="has-navbar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active bg-warning first-item m-1">
<a class="nav-link" href="#"><i class="fa fa-home"></i> Home</a>
</li>
<li class="nav-item bg-warning m-1">
<a class="nav-link" href="#"> <i class="fa fa-graduation-cap"></i>Courses</a>
</li>
<li class="nav-item bg-warning m-1">
<a class="nav-link" href="#"><i class="fa fa-shopping-cart"></i> E-learning products</a>
</li>
<li class="nav-item bg-warning m-1">
<a class="nav-link" href="#"><i class="fa fa-newspaper"></i> Articles</a>
</li>
<li class="nav-item bg-warning m-1">
<a class="nav-link" href="#"><i class="fa fa-calendar"></i> Events</a>
</li>
</ul>
</div>
</nav>
</div>
And the result looks like this:
As you can see the menu nav-item E-learning Products does not have enough space to place correctly in the place of nav-item.
However the other nav-items has extra space (as I mentioned out in the image).
So I need to make sure that every nav-item has enough required space based on the length of <a> links of nav-items.
And here comes the CSS code of this navbar:
/* Navbar */
.has-navbar{
margin-top:-10px;
width:100%;
height:30px;
}
.navbar{
background-color: #fff !important;
height:100%;
}
.nav-item{
height:30px;
width:130px !important;
}
.nav-item a{
font-size:13px;
font-weight: bold;
}
.first-item{
margin-right:-50px !important;
}
So here I tried setting width:130px !important; for .nav-item and it didn't work out well. I also tried width:100%; and this is the result:
So how can I properly place each nav-item menu link properly in their required space so the menu links does NOT have extra space AND not enough space?

Answer 1

So what you can do is set its width to max-content, which will be the maximum width that the content contained within can be.
Before(with width: 130px !important;):
After(with width: max-content;):
.nav-item{
height:30px;
//width:130px !important;
width: max-content;
}
Note: If you think it's too short, you could set a min-width value to whatever you like.