diff --git a/src/css/main.scss b/src/css/main.scss
index e0b8e46..4ea0094 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -266,7 +266,7 @@ body.has-modal #main {
     }
 
     .festival-period-container {
-        margin-bottom: 10px;
+        margin-top: -5px;
     }
 
     .festival-period {
diff --git a/src/js/components/splatoon/SplatfestBox.vue b/src/js/components/splatoon/SplatfestBox.vue
index 5e731d8..302c815 100644
--- a/src/js/components/splatoon/SplatfestBox.vue
+++ b/src/js/components/splatoon/SplatfestBox.vue
@@ -60,12 +60,12 @@
         </div>
 
         <div class="has-text-centered is-size-5 title-color festival-period-container" v-if="screenshotMode">
-            <span class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }" v-if="state == 'upcoming'">
+            <div class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }" v-if="state == 'upcoming'">
                 in {{ festival.times.start - now | shortDuration }}
-            </span>
-            <span class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }" v-if="state == 'active'">
+            </div>
+            <div class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }" v-if="state == 'active'">
                 {{ festival.times.end - now | durationHours }} remaining
-            </span>
+            </div>
         </div>
     </div>
 </template>