diff --git a/src/style-auro-calendar-month.scss b/src/style-auro-calendar-month.scss
index 26490023..9440f71e 100644
--- a/src/style-auro-calendar-month.scss
+++ b/src/style-auro-calendar-month.scss
@@ -18,9 +18,9 @@ $calendar-padding-desktop: var(--ds-size-200, $ds-size-200);
   position: relative;
 
   display: block;
-  width: calc(100% - var(--ds-size-300, $ds-size-300));
+  width: calc(100% - var(--ds-size-200, $ds-size-200) - var(--ds-size-200, $ds-size-200));
 
-  padding: 0 var(--ds-size-200, $ds-size-200);
+  margin: 0 var(--ds-size-200, $ds-size-200);
 
   background-color: var(--ds-color-background-lightest, $ds-color-background-lightest);
 
@@ -31,14 +31,6 @@ $calendar-padding-desktop: var(--ds-size-200, $ds-size-200);
   }
 }
 
-:host(:last-of-type) {
-  margin-bottom: 150px; // This value is derived from the height of the mobile-footer
-
-  @include auro_grid-breakpoint--sm {
-    margin-bottom: 0;
-  }
-}
-
 :host(:not(:last-of-type)) {
   @include auro_grid-breakpoint--sm {
     &:after {
diff --git a/src/style-auro-calendar.scss b/src/style-auro-calendar.scss
index 3a1813e0..26a5e422 100644
--- a/src/style-auro-calendar.scss
+++ b/src/style-auro-calendar.scss
@@ -56,10 +56,6 @@
 }
 
 .mobileHeader {
-  position: absolute;
-  top: 0;
-  left: 0;
-
   display: none;
   width: 100%;
   height: var(--mobile-header-height);
@@ -122,9 +118,6 @@
 }
 
 .mobileFooter {
-  position: fixed;
-  bottom: 0;
-
   display: none;
   width: 100%;
 
@@ -168,16 +161,21 @@
     display: flex;
   }
 
-  .calendars {
-    position: relative;
-    top: var(--mobile-header-height);
+  .calendarWrapper {
+    display: flex;
+    height: 100%;
+
+    flex-direction: column;
+    overflow: auto hidden;
+  }
 
+  .calendars {
     display: flex;
     flex-direction: column;
+    flex: 1;
 
     align-items: center;
     width: 100%;
-    height: calc(100vh - var(--mobile-header-height));
 
     overflow-y: scroll;
     overscroll-behavior: contain;