diff --git a/src/components/ResourcesLayout/styles.tsx b/src/components/ResourcesLayout/styles.tsx
index edccb12..9fcd61e 100644
--- a/src/components/ResourcesLayout/styles.tsx
+++ b/src/components/ResourcesLayout/styles.tsx
@@ -30,9 +30,11 @@ export const Overlay = styled.div`
 export const MainContent = styled.main`
   flex: 1 1 auto;
   margin-top: 128px;
+  margin-left: 320px;
   width: calc(100% - 320px);
 
   @media screen and (max-width: 767px) {
+    margin-left: 0;
     width: 100%;
   }
 
diff --git a/src/components/ResourcesSidebar/styles.tsx b/src/components/ResourcesSidebar/styles.tsx
index 964d002..1346ce2 100644
--- a/src/components/ResourcesSidebar/styles.tsx
+++ b/src/components/ResourcesSidebar/styles.tsx
@@ -6,12 +6,14 @@ export const ResourcesSidebarWrapper = styled.div`
   box-sizing: border-box;
   flex: 0 0 320px;
   background: #f9f9f9;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 320px;
 
   @media screen and (max-width: 767px) {
     z-index: 100;
-    position: fixed;
-    top: 0;
-    bottom: 0;
+    width: auto;
     /* TODO: maybe find a less "awkward" way to animate this */
     left: calc(-100% - 100px);
     right: calc(100% - 0px);