diff --git a/public/javascripts/note_editor.js b/public/javascripts/note_editor.js
index 4151102dd..c2e328a96 100644
--- a/public/javascripts/note_editor.js
+++ b/public/javascripts/note_editor.js
@@ -80,12 +80,12 @@ const noteEditor = (function() {
 
     function setNoteBackgroundIfProtected(note) {
         if (note.detail.is_protected) {
-            $("#note-detail").addClass("protected");
+            $("#note-detail-wrapper").addClass("protected");
             protectButton.hide();
             unprotectButton.show();
         }
         else {
-            $("#note-detail").removeClass("protected");
+            $("#note-detail-wrapper").removeClass("protected");
             protectButton.show();
             unprotectButton.hide();
         }
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index f0e74febe..e23ce30df 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -30,7 +30,7 @@
     overflow: auto;
 }
 
-#note-detail.protected {
+#note-detail-wrapper.protected {
     background-color: #eee;
 }
 
diff --git a/views/index.ejs b/views/index.ejs
index 905faa9e7..03253f719 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -94,7 +94,7 @@
         </div>
       </div>
 
-      <div style="overflow: auto; grid-area: note-content; padding-left: 10px;">
+      <div style="overflow: auto; grid-area: note-content; padding-left: 10px; padding-top: 10px;" id="note-detail-wrapper">
         <div id="note-detail"></div>
       </div>
     </div>