diff --git a/src/lib/App.svelte b/src/lib/App.svelte
index 32b5d82..61f6584 100644
--- a/src/lib/App.svelte
+++ b/src/lib/App.svelte
@@ -274,16 +274,13 @@ For example:
 
     const { line, column } = getLineAndColumn(index);
 
-    const editorStyle = getComputedStyle(editor);
-    const paddingLeft = parseFloat(editorStyle.paddingLeft) || 8;
-    const paddingTop = parseFloat(editorStyle.paddingTop) || 1;
-
-    const characterOffset = 1.0;
-
+    // Highlights live inside the overlay's content box, whose padding matches
+    // the textarea's padding exactly (see .highlight-overlay / .editor-textarea
+    // in main.scss). So positions are pure content-box coordinates — the shared
+    // padding already aligns them with the text; adding it here would double-count.
     return {
-      left:
-        (column - 1) * charWidth + paddingLeft - characterOffset * charWidth,
-      top: (line - 1) * lineHeight + paddingTop,
+      left: (column - 1) * charWidth,
+      top: (line - 1) * lineHeight,
       width: length * charWidth,
       height: lineHeight,
     };
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 0be5962..603802c 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -511,7 +511,7 @@ main {
   bottom: 0;
   pointer-events: none;
   overflow: auto;
-  padding: 0 10px;
+  padding: 0 12px;
   padding-top: 1px;
   box-sizing: border-box;
   white-space: pre;