diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
index 5ff3c232..ff4b3c06 100644
--- a/src/theme/css/chrome.css
+++ b/src/theme/css/chrome.css
@@ -450,7 +450,7 @@ ul#searchresults span.teaser em {
     z-index: -1;
 }
 [dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
-    transform: translateX(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
+    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
 }
 .sidebar::-webkit-scrollbar {
     background: var(--sidebar-bg);
@@ -461,7 +461,7 @@ ul#searchresults span.teaser em {
 
 /* sidebar-visible */
 #sidebar-toggle-anchor:checked ~ .page-wrapper {
-    transform: translateX(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
+    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
 }
 [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
     transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));