update website min width, fix pre elements expanding too far

src/scss/blog.scss

@@ -10,8 +10,15 @@
 }
 
 #post {
-	code span {
-		margin-left: 0 !important;
+	max-width: 100%;
+
+	pre {
+		code span {
+			margin-left: 0 !important;
+		}
+
+		overflow-x: scroll;
+		max-width: $page-width - $outer-gap * 2 - $inner-gap;
 	}
 
 	img {

src/scss/main.scss

@@ -109,15 +109,6 @@ body {
 	text-align: left;
 }
 
-@media (max-width: ($page-width + $outer-gap * 2)) {
-	body, #header,
-	#main, #footer,
-	#container {
-		width: 100%;
-		min-width: 250px;
-	}
-}
-
 #header,
 #footer {
 	display: block;
@@ -179,6 +170,25 @@ body {
 	}
 }
 
+/* once the page has been shrank to max content width */
+@media (max-width: ($page-width + $outer-gap * 2)) {
+	body {
+		width: 1px;
+		min-width: 100%;
+
+		.center {
+			  display: block;
+		}
+	}
+
+	.center, #header,
+	#main, #footer,
+	#container {
+		width: 100%;
+		max-width: 100%;
+	}
+}
+
 @media (max-width: 800px) {
 	#header {
 		display: block;
@@ -210,6 +220,12 @@ body {
 	}
 }
 
+@media (max-width: 300px) {
+	body {
+	      width: 300px;
+	}
+}
+
 #footer {
 	padding: $inner-gap;