Use flex's gap property (#901)

To apply the same spacing to all the nav-menu-setting items
we now can use flex's gap property [1] due to its availability across browsers

[1]: https://caniuse.com/flexbox-gap

Author: marinaaisa

src/components/DocumentationTopic/DocumentationNav.vue

@@ -141,6 +141,7 @@ $sidenav-icon-padding-size: 5px;
   &-settings {
     // ensure settings can get smaller if needed
     min-width: 0;
+    gap: $nav-space-between-elements;
 
     @include font-styles(nav-toggles);
 
@@ -160,14 +161,6 @@ $sidenav-icon-padding-size: 5px;
         @include underline-text;
       }
 
-      &:first-child:not(:only-child) {
-        margin-right: $nav-space-between-elements;
-
-        @include nav-in-breakpoint() {
-          margin-right: 0;
-        }
-      }
-
       @include nav-dark() {
         color: var(--color-nav-dark-current-link);
       }