diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx
index a834a2b40..fa821a7a3 100644
--- a/library/src/containers/Sidebar/Sidebar.tsx
+++ b/library/src/containers/Sidebar/Sidebar.tsx
@@ -122,7 +122,7 @@ export const Sidebar: React.FunctionComponent = () => {
             showSidebar ? 'w-full' : ''
           } block fixed max-h-screen h-full font-sans px-4 pt-8 pb-16 overflow-y-auto bg-gray-200`}
         >
-          <div className="sidebar--content">
+          <div className="sidebar--wrapper">
             <div>
               {logo ? (
                 // eslint-disable-next-line @next/next/no-img-element
diff --git a/library/src/styles/default.css b/library/src/styles/default.css
index d82010887..fa973432b 100644
--- a/library/src/styles/default.css
+++ b/library/src/styles/default.css
@@ -13,15 +13,19 @@
     @apply lg:relative lg:block lg:w-64 lg:h-auto;
   }
 
+  .container\:xl .sidebar--wrapper {
+    @apply xl:w-full
+    @apply sm:w-full;
+  }
   .container\:base .sidebar--content {
     @apply lg:w-56;
   }
 
-  .container\:xl .sidebar--content {
+  /* .container\:xl .sidebar--content {
     @apply absolute;
     left: 50%;
     transform: translate(-50%, 0);
-  }
+  } */
 
   .container\:base .panel-item {
     @apply 2xl:flex;