diff --git a/templates/index.html b/templates/index.html
index e79036b..30934ba 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -36,15 +36,22 @@
     --text: #1e293b;
     --shadow: 0 2px 8px rgba(30,41,59,0.07);
 }
+
+* {
+    box-sizing: border-box;
+}
 body {
     background: var(--background);
     color: var(--text);
     font-family: 'Segoe UI', Arial, sans-serif;
     margin: 0;
     padding: 0;
+    overflow-x: hidden;
+    box-sizing: border-box;
 }
 .container {
     max-width: 480px;
+    width: 100%;
     margin: 3em auto;
     background: var(--surface);
     border-radius: 16px;
@@ -52,6 +59,7 @@ body {
     padding: 2.5em 2em 2em 2em;
     border: 1px solid var(--border);
     position: relative;
+    box-sizing: border-box;
 }
 .help-button-container {
     position: absolute;
@@ -136,6 +144,7 @@ body {
     border-radius: 12px;
     padding: 2em;
     max-width: 90%;
+    width: 90%;
     max-height: 90%;
     overflow-y: auto;
     position: relative;
@@ -143,6 +152,7 @@ body {
     margin: 0 auto;
     left: 50%;
     transform: translateX(-50%);
+    box-sizing: border-box;
 }
 .modal-close {
     position: absolute;
@@ -410,6 +420,8 @@ button:focus, .accordion-header:focus {
     .container {
         margin: 1em;
         padding: 1.2em 0.7em 1em 0.7em;
+        width: calc(100% - 2em);
+        max-width: none;
     }
     h1 {
         font-size: 1.3em;
@@ -432,6 +444,10 @@ button:focus, .accordion-header:focus {
     .modal-content {
         padding: 1.5em;
         margin: 1em;
+        width: calc(100% - 2em);
+        max-width: none;
+        left: 0;
+        transform: none;
     }
 }