diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss
index 06fdd228..7038bfab 100644
--- a/scss/components/_nav.scss
+++ b/scss/components/_nav.scss
@@ -31,10 +31,10 @@ nav {
     list-style: none;
 
     &:first-of-type {
-      margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
+      margin-left: max(var(--nav-element-spacing-horizontal), -1 * var(--nav-element-spacing-horizontal));
     }
     &:last-of-type {
-      margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
+      margin-right: max(var(--nav-element-spacing-horizontal), -1 * var(--nav-element-spacing-horizontal));
     }
   }
 
@@ -52,8 +52,9 @@ nav {
 
   :where(a, [role="link"]) {
     display: inline-block;
-    margin: calc(var(--nav-link-spacing-vertical) * -1)
-      calc(var(--nav-link-spacing-horizontal) * -1);
+    margin:
+      max(var(--nav-element-spacing-vertical), -1 * var(--nav-element-spacing-vertical))
+      max(var(--nav-element-spacing-horizontal), -1 * var(--nav-element-spacing-horizontal));
     padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
     border-radius: var(--border-radius);
     text-decoration: none;