diff --git a/assets/sass/header.scss b/assets/sass/header.scss
index 793ec52c..010191d7 100644
--- a/assets/sass/header.scss
+++ b/assets/sass/header.scss
@@ -7,7 +7,8 @@
   height: 6rem;
   z-index: 12;
   border-bottom: var(--border);
-  padding-left: calc((100vw - 100%) / 2);
+  padding-left: calc((100vw - 100%) / 2 + env(safe-area-inset-left, 0px));
+  padding-right: env(safe-area-inset-right, 0px);
 
   @media print {
     display: none;
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index be26ecff..a94a7269 100644
--- a/assets/sass/styles.scss
+++ b/assets/sass/styles.scss
@@ -89,11 +89,13 @@ a,
 
 main {
   margin-top: 2rem;
-  padding-left: calc(100vw - 100%);
+  padding-left: calc(100vw - 100% + env(safe-area-inset-left, 0px));
+  padding-right: env(safe-area-inset-right, 0px);
 
   @media print {
     margin-top: 0;
     padding-left: 0;
+    padding-right: 0;
   }
 }
 
@@ -107,6 +109,8 @@ main {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
   position: relative;
 }