diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
index fbba0bd..ad36222 100644
--- a/sass/parts/_header.scss
+++ b/sass/parts/_header.scss
@@ -24,13 +24,15 @@ header {
 .nav-navs {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
+    gap: 1px;
 
     ul {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        gap: 1px;
+        display: inherit;
+        flex-wrap: inherit;
+        justify-content: inherit;
+        align-items: inherit;
+        gap: inherit;
         margin: 0;
         padding: 0;
         list-style: none;
@@ -76,11 +78,18 @@ header {
 
     ul,
     li {
-        display: inline;
+        display: inline-block;
+        margin-inline-end: 0.2rem;
         font-family: var(--sans-serif-font);
         list-style-type: none;
     }
+
+    .separator {
+        margin-inline-end: 0.2rem;
+        user-select: none;
+    }
 }
+
 .language-switcher {
     display: flex;
     justify-content: center;
diff --git a/templates/page.html b/templates/page.html
index c269531..c721da6 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -140,22 +140,24 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
                 {%- set previous_visible = true -%}
             {% endif %}
 
+            {%- set separator_with_class = "<span class='separator'>" ~ separator ~ "</span>"-%}
+
             {#- Date -#}
             {% if page.date and macros_settings::evaluate_setting_priority(setting="show_date", page=page, default_global_value=true) == "true" %}
-                {%- if previous_visible -%}&nbsp;{{ separator }}&nbsp;{%- endif -%}<li>{{ macros_format_date::format_date(date=page.date, short=true, language_strings=language_strings) }}</li>
+                <li>{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}{{ macros_format_date::format_date(date=page.date, short=true, language_strings=language_strings) }}</li>
                 {#- Variable to keep track of whether we've shown a section, to avoid separators as the first element -#}
                 {%- set previous_visible = true -%}
             {% endif %}
 
             {#- Reading time -#}
             {% if macros_settings::evaluate_setting_priority(setting="show_reading_time", page=page, default_global_value=true) == "true" %}
-                {%- if previous_visible -%}&nbsp;{{ separator }}&nbsp;{%- endif -%}<li title="{{ macros_translate::translate(key="words", number=page.word_count, default="$NUMBER words", language_strings=language_strings) }}">{{ macros_translate::translate(key="min_read", number=page.reading_time, default="$NUMBER min read", language_strings=language_strings) }}</li>
+                <li title="{{ macros_translate::translate(key="words", number=page.word_count, default="$NUMBER words", language_strings=language_strings) }}">{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}{{ macros_translate::translate(key="min_read", number=page.reading_time, default="$NUMBER min read", language_strings=language_strings) }}</li>
                 {%- set previous_visible = true -%}
             {% endif %}
 
             {#- Tags -#}
             {%- if page.taxonomies and page.taxonomies.tags -%}
-                {%- if previous_visible -%}&nbsp;{{ separator }}&nbsp;{%- endif -%}<li>{{- macros_translate::translate(key="tags", default="tags", language_strings=language_strings) | capitalize -}}:&nbsp;</li>
+                <li>{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}{{- macros_translate::translate(key="tags", default="tags", language_strings=language_strings) | capitalize -}}:&nbsp;</li>
                 {%- for tag in page.taxonomies.tags -%}
                     <li><a href="{{ get_taxonomy_url(kind='tags', name=tag, lang=lang) | safe }}">{{ tag }}</a>
                     {%- if not loop.last -%}
@@ -174,8 +176,7 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
                 </ul><ul class="meta last-updated"><li>{{ updated_str }}</li>
                 {# Show link to remote changes if enabled #}
                 {% if config.extra.remote_repository_url and macros_settings::evaluate_setting_priority(setting="show_remote_changes", page=page, default_global_value=true) == "true" %}
-                    {%- if previous_visible -%}{{ separator }}&nbsp;{%- endif -%}
-                    <li><a href="{% include "partials/history_url.html" %}" {{ blank_target }} rel="{{ rel_attributes }}">{{ macros_translate::translate(key="see_changes", default="See changes", language_strings=language_strings) }}<small>&nbsp;<span class="arrow-corner">↗</span></small></a></li>
+                    <li>{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}<a href="{% include "partials/history_url.html" %}" {{ blank_target }} rel="{{ rel_attributes }}">{{ macros_translate::translate(key="see_changes", default="See changes", language_strings=language_strings) }}<small>&nbsp;<span class="arrow-corner">↗</span></small></a></li>
                 {% endif %}
             {% endif %}
         </ul>
diff --git a/templates/partials/nav.html b/templates/partials/nav.html
index e2ea155..5fd351f 100644
--- a/templates/partials/nav.html
+++ b/templates/partials/nav.html
@@ -18,28 +18,31 @@
                         {% endfor %}
                     {%- endif -%}
 
-                    {# Search #}
-                    {%- if config.build_search_index %}
-                    {%- set search_icon_title = macros_translate::translate(key='search_icon_title', default='Press $SHORTCUT to open search', language_strings=language_strings) -%}
-                    <li class="js">
-                        <div role="button" tabindex="0" id="search-button" class="search-icon interactive-icon" title="{{ search_icon_title }}" aria-label="{{ search_icon_title }}">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-                                <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
-                            </svg>
-                        </div>
-                    </li>
-                    {%- endif %}
+                    {#- Wrap the icons in a div to keep them all together -#}
+                    <div class="nav-navs">
+                        {# Search #}
+                        {%- if config.build_search_index %}
+                        {%- set search_icon_title = macros_translate::translate(key='search_icon_title', default='Press $SHORTCUT to open search', language_strings=language_strings) -%}
+                        <li class="js">
+                            <div role="button" tabindex="0" id="search-button" class="search-icon interactive-icon" title="{{ search_icon_title }}" aria-label="{{ search_icon_title }}">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+                                    <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
+                                </svg>
+                            </div>
+                        </li>
+                        {%- endif %}
 
-                    {# Language switcher #}
-                    {# Display the language switcher only if more than one language is available #}
-                    {%- if config.languages | length > 0 %}
-                    {% include "partials/language_switcher.html" %}
-                    {%- endif %}
+                        {# Language switcher #}
+                        {# Displayed only if more than one language is available #}
+                        {%- if config.languages | length > 0 %}
+                        {% include "partials/language_switcher.html" %}
+                        {%- endif %}
 
-                    {# Theme switcher #}
-                    {%- if config.extra.theme_switcher and config.extra.theme_switcher == true -%}
-                    {%- include "partials/theme_switcher.html" -%}
-                    {%- endif -%}
+                        {# Theme switcher #}
+                        {%- if config.extra.theme_switcher and config.extra.theme_switcher == true -%}
+                        {%- include "partials/theme_switcher.html" -%}
+                        {%- endif -%}
+                    </div>
                 </ul>
             </div>
         {% endif %}