diff --git a/css/src/style.scss b/css/src/style.scss
index b5e94d7a2..fc081ff20 100644
--- a/css/src/style.scss
+++ b/css/src/style.scss
@@ -443,6 +443,10 @@ $blue_due: #4271a6;			// due dates and low importance
 						z-index: 10;
 					}
 
+					&.completed {
+						margin-top: 12px;
+					}
+
 					// Show round corners for first root task
 					> .task-item {
 						&:first-child > .task-body {
@@ -776,7 +780,6 @@ $blue_due: #4271a6;			// due dates and low importance
 	.heading {
 		display: flex;
 		align-items: center;
-		margin-bottom: 10px;
 		margin-top: 20px !important;
 
 		@media only screen and (max-width: $breakpoint-mobile) {
@@ -784,6 +787,8 @@ $blue_due: #4271a6;			// due dates and low importance
 		}
 
 		&--hiddentasks {
+			margin-bottom: 0;
+
 			.heading__title {
 				display: inline-block;
 				padding-right: 16px;
diff --git a/src/components/TheCollections/Calendar.vue b/src/components/TheCollections/Calendar.vue
index 07a59a6e2..743301304 100644
--- a/src/components/TheCollections/Calendar.vue
+++ b/src/components/TheCollections/Calendar.vue
@@ -50,6 +50,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					:tasks="completedRootTasks(calendar.tasks)"
 					:calendar-id="calendarId"
 					:disabled="calendar.readOnly"
+					class="completed"
 					collection-id="completed" />
 				<LoadCompletedButton :calendar="calendar" />
 				<DeleteCompletedModal v-if="calendar.loadedCompleted && !calendar.readOnly" :calendar="calendar" />