<!-- Navigation starts as empty UL that will be populated with JS -->
Is the code you’ve posted given as the assignment?
Unless you want a general discussion about possible ways to distribute a nav bar horizontally:
– Please tell what you are allowed to change in e.g. the CSS you’ve posted.
– Please also give an example of what could populate the nav list.
Using floats is a fairly “old” way of positioning your menu items. It will require you to size them proportionally to the total width.
It would be easier to use something like display table or flex, as these can allocate space evenly per item, or divide the space available proportionally to the size of each item, without having to work any of that out yourself.
The 33% doesn’t have to be that accurate as long s its less than a third of the space. Flex will flex to fill any gaps automatically. It could be flex:1 0 0% and still look much the same unless you had menu items with lots more text and then they would be wider etc. They will always fit though.