diff --git a/assets/scss/components/code-highlight.scss b/assets/scss/components/code-highlight.scss
index 495bedb..21b87c3 100644
--- a/assets/scss/components/code-highlight.scss
+++ b/assets/scss/components/code-highlight.scss
@@ -1,12 +1,10 @@
 $ht-code-border-radius: .4em;
 .highlight {
-    width: 50%;
+    width: 100%;
     overflow-x: scroll;
     // border-radius: $ht-code-border-radius;
     margin-top: 0em;
     margin-bottom: 0em;
-    margin-right: 2.5%;
-    margin-left: 2.5%;
     -ms-overflow-style: none;
     scrollbar-width: none;
 
@@ -15,7 +13,7 @@ $ht-code-border-radius: .4em;
     }
 
     code {
-        font-size: 1rem;
+        font-size: 0.9rem;
         display: block;
     }
 
diff --git a/assets/scss/general.scss b/assets/scss/general.scss
index 172869e..fb9cf56 100644
--- a/assets/scss/general.scss
+++ b/assets/scss/general.scss
@@ -183,9 +183,10 @@ code {
 }
 
 pre code {
-  position: absolute;
   background-color: #282a36;
   padding: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;;
 }
 
 
diff --git a/assets/scss/tufte.scss b/assets/scss/tufte.scss
index 4fcc04e..0798192 100644
--- a/assets/scss/tufte.scss
+++ b/assets/scss/tufte.scss
@@ -261,21 +261,76 @@ img {
     max-width: 100%;
 }
 
-.sidenote,
+
+:root {
+    --sidenote-offset: calc(100% - 42.5%);
+}
+
+// .sidenote {
+//     float: right;
+//     clear: both;
+//     left: 57.5%; // var(--sidenote-offset);
+//     right: 2.5%;
+//     border-style: solid;
+//     border-width: 2px;
+//     border-color: #333333;
+//     width: auto;
+//     margin-top: 10px;
+//     margin-bottom: 10px;
+//     padding: 8px;
+//     paddinr-right: 0px;
+//     font-size: 1.1rem;
+//     line-height: 1.3;
+//     position: absolute;
+// }
+
+// #main > section > ol > li {
+//     position: relative;
+// }
+
+// #main > section > p {
+//     position: relative;
+// }
+
+.sidenote {
+    float: right;
+    position: absolute;
+    left: calc(100vw - 46vw);
+    right: 2.5vw;
+
+    width: auto;
+    border-style: solid;
+    border-width: 2px;
+    border-color: #333333;
+
+    font-size: 1rem;
+    line-height: 1.3;
+}
+
+
+
 .marginnote {
     float: right;
-    clear: right;
-    margin-left: 60%;
-    margin-right: -25%;
-    max-width: 100%;
-    margin-top: 0;
-    margin-bottom: 0;
-    font-size: 1.1rem;
-    line-height: 1.3;
-    vertical-align: baseline;
+    border-style: solid;
+    border-width: 2px;
+    border-color: #333333;
+    padding: 8px;
+    padding-bottom: 0;
+    padding-top: 0;
+    left: 57.5%;
+    right: 2.5%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: auto;
     position: absolute;
 }
 
+.marginnote p {
+    width: 100%;
+    font-size: 1rem;
+    line-height: 1.3;
+}
+
 .table-caption {
     float: right;
     clear: right;
@@ -389,16 +444,20 @@ h3 .code {
 
 .marginnote .code,
 .sidenote .code {
-    font-size: 1rem;
+    font-size: 0.9rem;
 }
 
 pre.code {
     font-size: 0.9rem;
     width: 52.5%;
     padding-left: 2.5%;
+    width: 90%;
     overflow-x: scroll;
 }
 
+
+
+
 .fullwidth {
     max-width: 90%;
     clear: both;
@@ -477,10 +536,6 @@ label.marginnote-ind {
         vertical-align: baseline;
         position: relative;
     }
-    pre.code {
-        width: 90%;
-        padding: 0;
-    }
     .table-caption {
         display: block;
         float: right;