various css fixes

src/assets/style/_content-box.scss

@@ -1,6 +1,8 @@
 // Used to wrap content inside a nice box.
 .content-box {
-	background-color: var(--bg-highlight-color);
+	background-color: var(--bg-content-color);
+	max-width: var(--content-width);
+	margin: 0 auto;
 	transition: background-color .6s;
 	padding: var(--space);
   border-radius: var(--radius);

src/assets/style/_variables.scss

@@ -3,16 +3,17 @@ html {
 	--base-font-size: 20px;
 }
 
+// Light default theme
 body {
  	--bg-color: #F3F7F9;
- 	--bg-highlight-color: #FFF;
+ 	--bg-content-color: #fff;
  	--bg-code: #fffbf3;
  	--body-color: #444;
  	--title-color: #111;
  	--link-color: #2cb2f5;
  	--border-color:  rgba(0,0,0,.1);;
   --space: 3.5rem;
-  --container-width: 860px;
+  --content-width: 860px;
   --header-height: 80px;
   --radius: 5px;
 }
@@ -32,7 +33,7 @@ body {
 // Override variables for Dark theme
 body[data-theme="dark"] {
  	--bg-color: #0D2538;
- 	--bg-highlight-color: #0f2d44;
+ 	--bg-content-color: #0f2d44;
  	--bg-code: rgba(0,0,0,.3);
  	--border-color:  rgba(255,255,255,.1);;
  	--body-color: #ced8de;

src/layouts/Default.vue

@@ -54,16 +54,16 @@ export default {
     align-items: center;
   }
 
-  @media screen and (min-width: 1200px) {
+  @media screen and (min-width: 1300px) {
     //Make header sticky for large screens
     position: sticky;
+    width: 100%;
   }
 }
 
 .main {
-  max-width: var(--container-width);
   margin: 0 auto;
-  padding: 2.5vw 15px 0;
+  padding: 1.5vw 15px 0;
 }
 
 .footer {