Update index.html

Author: RealAbdurRehman

index.html

@@ -67,19 +67,19 @@ <h1><a href="./index.html" class="h1__link"></a><span class="cursor">_</span></h
         <p>In your CSS file, write the following code:</p>
         <pre class="code-block">
           <code>
-  .box {
-    width: 200px;
-    height: 100px;
-    background-color: #4E4E4E;
-    margin: 20px;
-  }
+  .box {  
+    width: 200px; 
+    height: 100px;  
+    background-color: #4E4E4E;  
+    margin: 20px; 
+  } 
           </code>
         </pre>
         <p>This code defines a <code class="inline-code">.box</code> class with a <code class="inline-code">width</code> of <code class="inline-code">200px</code>, a <code class="inline-code">height</code> of <code class="inline-code">100px</code>, a <code class="inline-code">background-color</code>, and a <code class="inline-code">margin</code> of <code class="inline-code">20px</code> on all sides. The margin creates space around the <code class="inline-code">.box</code> element, pushing it away from other elements and the edges of its container.</p>
         <p>Apply the .box class to an HTML element and view the result in your browser to see the margin effect:</p>
         <pre class="code-block">
           <code>
-  &lt;div class="box"&gt;&lt;/div&gt;
+  &lt;div class="box"&gt;&lt;/div&gt;  
           </code>
         </pre>
       </section>
@@ -93,7 +93,7 @@ <h1><a href="./index.html" class="h1__link"></a><span class="cursor">_</span></h
   .box {
     width: 200px;
     height: 100px;
-    background-color: #4E4E4E;
+    background-color: #4E4E4E;  
     padding: 20px;
   }
           </code>
@@ -102,7 +102,7 @@ <h1><a href="./index.html" class="h1__link"></a><span class="cursor">_</span></h
         <p>Apply the <code class="inline-code">.box</code> class to an HTML element and view the result in your browser to see the padding effect:</p>
         <pre class="code-block">
           <code>
-  &lt;div class="box"&gt;Content inside the box&lt;/div&gt;
+  &lt;div class="box"&gt;Content inside the box&lt;/div&gt;  
           </code>
         </pre>
         <p>Select the CSS and HTML in your editor and refresh your browser to observe how the padding impacts the layout and the spacing within the element!</p>
@@ -115,14 +115,14 @@ <h1><a href="./index.html" class="h1__link"></a><span class="cursor">_</span></h
         <pre class="code-block">
           <code>
   :root {
-    --primary-color: #3498db;
+    --primary-color: #3498db;   
     --padding-size: 20px;
   }
 
   .box {
     width: 200px;
     height: 100px;
-    background-color: var(--primary-color);
+    background-color: var(--primary-color);   
     padding: var(--padding-size);
   }
           </code>
@@ -131,7 +131,7 @@ <h1><a href="./index.html" class="h1__link"></a><span class="cursor">_</span></h
         <p>Apply the <code class="inline-code">.box</code> class to an HTML element and view the result in your browser to see the effect of the custom properties:</p>
         <pre class="code-block">
           <code>
-  &lt;div class="box"&gt;Content inside the box&lt;/div&gt;
+  &lt;div class="box"&gt;Content inside the box&lt;/div&gt;  
           </code>
         </pre>
         <p>Select the CSS and HTML in your editor and refresh your browser to observe how the custom properties impact the styling of the element. Try changing the values of the variables to see how it updates the design throughout your stylesheet!</p>
@@ -173,7 +173,7 @@ <h1><a href="./index.html" class="h1__link"></a><span class="cursor">_</span></h
           <code>
   .container {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);    
     grid-gap: 10px;
     height: 200px;
     background-color: #4E4E4E;
@@ -190,12 +190,12 @@ <h1><a href="./index.html" class="h1__link"></a><span class="cursor">_</span></h
         <pre class="code-block">
           <code>
   &lt;div class="container"&gt;
-    &lt;div class="item"&gt;1&lt;/div&gt;
-    &lt;div class="item"&gt;2&lt;/div&gt;
-    &lt;div class="item"&gt;3&lt;/div&gt;
-    &lt;div class="item"&gt;4&lt;/div&gt;
-    &lt;div class="item"&gt;5&lt;/div&gt;
-    &lt;div class="item"&gt;6&lt;/div&gt;
+    &lt;div class="item"&gt;1&lt;/div&gt;   
+    &lt;div class="item"&gt;2&lt;/div&gt;   
+    &lt;div class="item"&gt;3&lt;/div&gt;   
+    &lt;div class="item"&gt;4&lt;/div&gt;   
+    &lt;div class="item"&gt;5&lt;/div&gt;   
+    &lt;div class="item"&gt;6&lt;/div&gt;   
   &lt;/div&gt;
           </code>
         </pre>