Hi.

nav-pills in the form as you trying to use it is an obsolete from Bootstrap 3, working via float property. It was CSS hack, at the time when there were no modern CSS modules for building a layout. As far as I see, you have reproduced this using your custom code. But in fact, it does not make sense to be reproduced.

You can add any of your own class to the module/menu and use one, simple CSS line instead of a whole bunch of code that you added. As I see wholetopmenu - your own module class. So the code will be like that:

.wholetopmenu .menu {
    flex-direction: row;
}

Or just add flex-row class to the menu in module settings. https://getbootstrap.com/docs/5.2/utilities/flex/

Tip: Learn Flex Box and CSS Grid modules.

The smaller the code the better the performance of the site.

And should not be using display: contents; for nav. This can cause problems with the accessibility on the MAC devices