Hidden header navigation links continue to affect the layout of visible links!

i am using this bit of code to hide some header navigation links: 

<style>
  .header-nav-item--collection
a[href="/1"],
a[href="/2"],
a[href="/3"]{
    display: none !important;
}
</style>

Two of the links behave well but for whatever reason one of them, i am not sure which, behaves as if i was using the command visibility: hidden and messes up the layout of the header navigation links. Can i do something about this? Any help would be greatly appreciated! (My site is not live yet.)

Firstly can you share your website URL so I can see how the layout messes up?

The way you are targeting the links is different; the first one is targeted with:

.header-nav-item--collection a[href="/1"]

the second with:

a[href="/2"]

 and the third:

a[href="/3"]

You can tell this from the brackets and commas. This may explain why they are acting differently.

thank you. for the desperate: this codes hides 1, 2 and 3 and displays 4, 5 and 6 (i have 6 header navigation links):

<style>
  .header-nav-item--collection {
    display: none !important; /* Hide all navigation items by default */
  }
  .header-nav-item--collection:nth-child(4),
  .header-nav-item--collection:nth-child(5),
  .header-nav-item--collection:nth-child(6) {
    display: inline-block !important; /* Display the specific items you want to show */
  }
</style>