[css] Stretch horizontal ul to fit width of div

For the main nav of my site, there is a 980px wide div with a ul for the main nav links. I am trying to make the nav links stretch to fit the width of the div evenly.

<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>
</ul>
</div>

I am doing some typical css to make the ul list horizontally (float: left, display: block). I can tweak the padding of the li to get it very close, but what I really need is a way to make it stretch to fit automatically. Possible?

Edit Difficulty 1: Can't use tables. Difficulty 2: Each nav item will be a different width to accommodate longer and shorter link names.

I Hope that this helps you out... Because I tried all the answers but nothing worked perfectly. So, I had to come up with a solution on my own.

#horizontal-style {
  padding-inline-start: 0 !important; // Just in case if you find that there is an extra padding at the start of the line 
  justify-content: space-around;
  display: flex;
}

#horizontal-style a {
    text-align: center;
    color: white;
    text-decoration: none;
}

People hate on tables for non-tabular data, but what you're asking for is exactly what tables are good at. <table width="100%">

inelegant (but effective) way: use percentages

#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

This only works with the 5 <li> example. For more or less, modify your percentage accordingly. If you have other <li>s on your page, you can always assign these particular ones a class of "menu-li" so that only they are affected.