diff --git a/docs/src/global.css b/docs/src/global.css
index a75bb70e..ae82aba1 100644
--- a/docs/src/global.css
+++ b/docs/src/global.css
@@ -246,7 +246,6 @@ main.bx--content {
 
 @media (max-width: 1056px) {
   .bx--side-nav ~ .bx--content {
-    margin-left: 0;
     padding-left: 1rem;
     padding-right: 1rem;
   }
diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte
index cda23db3..88fc2aa0 100644
--- a/src/UIShell/Content.svelte
+++ b/src/UIShell/Content.svelte
@@ -1,8 +1,15 @@
 <script>
   /** Specify the id for the main element */
   export let id = "main-content";
+
+  import { isSideNavCollapsed } from "./navStore";
 </script>
 
-<main id="{id}" class:bx--content="{true}" {...$$restProps}>
+<main
+  id="{id}"
+  class:bx--content="{true}"
+  {...$$restProps}
+  style="{$isSideNavCollapsed && 'margin-left: 0;'} {$$restProps.style}}"
+>
   <slot />
 </main>
diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte
index 6dbadb32..4efd53dd 100644
--- a/src/UIShell/SideNav.svelte
+++ b/src/UIShell/SideNav.svelte
@@ -32,13 +32,14 @@
   export let expansionBreakpoint = 1056;
 
   import { onMount, createEventDispatcher } from "svelte";
-  import { shouldRenderHamburgerMenu } from "./navStore";
+  import { shouldRenderHamburgerMenu, isSideNavCollapsed } from "./navStore";
 
   const dispatch = createEventDispatcher();
 
   let winWidth = undefined;
 
   $: dispatch(isOpen ? "open" : "close");
+  $: $isSideNavCollapsed = !isOpen;
 
   onMount(() => {
     shouldRenderHamburgerMenu.set(true);
diff --git a/src/UIShell/navStore.js b/src/UIShell/navStore.js
index 358127be..ed18821c 100644
--- a/src/UIShell/navStore.js
+++ b/src/UIShell/navStore.js
@@ -1,3 +1,5 @@
 import { writable } from "svelte/store";
 
 export const shouldRenderHamburgerMenu = writable(false);
+
+export const isSideNavCollapsed = writable(false);