diff --git a/docs/grid.html b/docs/grid.html
index 9d41931..459d8ec 100644
--- a/docs/grid.html
+++ b/docs/grid.html
@@ -337,7 +337,6 @@
           </div>
         </div>
       </div>
-
 	  <div class="row">
 	    <div class="col-sm col-lg-10 col-lg-offset-1">
 	  	<div class="card fluid">
@@ -369,24 +368,24 @@
 	  		<div class="row">
 	  		  <div class="col-sm-12 col-md-6">
 	  			<pre>&lt;div class=&quot;row cols-sm-12 cols-md-6&quot;&gt;
-    &lt;div&gt;
-      &lt;p&gt;col-sm-12, col-md-6&lt;/p&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;p&gt;col-sm-12, col-md-6&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;</pre>
+  &lt;div&gt;
+    &lt;p&gt;col-sm-12, col-md-6&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;p&gt;col-sm-12, col-md-6&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
 	  			<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can add multiple predefined layout classes for different screen sizes, allowing you to build responsive predefined layouts.</p>
 	  		  </div>
 	  		  <div class="col-sm-12 col-md-6">
 	  			<pre>&lt;div class=&quot;row cols-sm-6&quot;&gt;
-    &lt;div class=&quot;row cols-sm-7&quot;&gt;
-      &lt;p&gt;col-sm-6&lt;/p&gt;
-    &lt;/div&gt;
-    &lt;div class=&quot;row cols-sm-5&quot;&gt;
-      &lt;p&gt;col-sm-6&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;</pre>
+  &lt;div class=&quot;row cols-sm-7&quot;&gt;
+    &lt;p&gt;col-sm-6&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;row cols-sm-5&quot;&gt;
+    &lt;p&gt;col-sm-6&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
 	  			<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid using the normal column classes in conjunction with predefined layouts, as they will most likely not apply and can sometimes cause unexpected behavior.</p>
 	  		  </div>
 	  		</div>
@@ -394,7 +393,6 @@
 	  	</div>
 	    </div>
 	  </div>
-
       <div class="row">
         <div class="col-sm col-lg-10 col-lg-offset-1">
           <div class="card fluid">
@@ -584,26 +582,26 @@
 			  <div class="row">
 				<div class="col-sm-12 col-md-6">
 				  <pre>&lt;div class=&quot;row&quot;&gt;
-    &lt;div class=&quot;col-sm-1 col-md-2 col-lg-3&quot;&gt;
-      &lt;img src=&quot;...&quot;&gt;
-    &lt;/div&gt;
-    &lt;div class=&quot;col-sm-11 col-md-10 col-lg-9&quot;&gt;
-      &lt;h2&gt;Media object heading&lt;/h2&gt;
-      &lt;p&gt;Media object content...&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;</pre>
+  &lt;div class=&quot;col-sm-1 col-md-2 col-lg-3&quot;&gt;
+    &lt;img src=&quot;...&quot;&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;col-sm-11 col-md-10 col-lg-9&quot;&gt;
+    &lt;h2&gt;Media object heading&lt;/h2&gt;
+    &lt;p&gt;Media object content...&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
 				  <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can make your media object responsive, by adding screen-specific layout classes to its columns.</p>
 				</div>
 				<div class="col-sm-12 col-md-6">
 				  <pre>&lt;div class=&quot;row&quot;&gt;
-    &lt;div class=&quot;col-sm-1 col-sm-last&quot;&gt;
-      &lt;img src=&quot;...&quot;&gt;
-    &lt;/div&gt;
-    &lt;div class=&quot;col-sm&quot;&gt;
-      &lt;h2&gt;Media object heading&lt;/h2&gt;
-      &lt;p&gt;Media object content...&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;</pre>
+  &lt;div class=&quot;col-sm-1 col-sm-last&quot;&gt;
+    &lt;img src=&quot;...&quot;&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;col-sm&quot;&gt;
+    &lt;h2&gt;Media object heading&lt;/h2&gt;
+    &lt;p&gt;Media object content...&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
 				  <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can align the media object's content to the left of the image (instead of the other way round), using the <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code> class, replacing <code><span class="fore-primary">SCR_SZ</span></code> with the desired screen size.</p>
 				</div>
 				<div class="col-sm-12 col-md-6">
@@ -634,12 +632,12 @@
 				</div>
 				<div class="col-sm-12 col-md-6">
 				  <pre>&lt;div class=&quot;row&quot;&gt;
-    &lt;img src=&quot;...&quot; class=&quot;col-sm-1&quot;&gt;
-    &lt;div class=&quot;col-sm&quot;&gt;
-      &lt;h2&gt;Media object heading&lt;/h2&gt;
-      &lt;p&gt;Media object content...&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;</pre>
+  &lt;img src=&quot;...&quot; class=&quot;col-sm-1&quot;&gt;
+  &lt;div class=&quot;col-sm&quot;&gt;
+    &lt;h2&gt;Media object heading&lt;/h2&gt;
+    &lt;p&gt;Media object content...&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
 				  <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Do not apply a column class directly to the media element (e.g.<code>&lt;img&gt;</code>) or the content of the media object, as this can cause problems with certain elements. Wrap your media objects columns in <code>&lt;div&gt;</code> elements and apply the grid classes to them, instead.</p>
 				</div>
 			  </div>
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index 6d56e64..19791ba 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -841,3 +841,4 @@
 - Updated `#header-logo` styling in order to make the framework's logo display properly in Chrome.
 - Updated `header`s `logo` element styling to make sure that it does not *jump* in Chrome.
 - Documented predefined layouts in `grid.html`.
+- Fixed the `pre` segments in `grid.html`.