Mades fixes and updates.

removed commented code.
Better spacing and readability in style.css.
Chaged ID's to match articles content.

Author: HM-127BTY

Wireframe/index.html

@@ -16,24 +16,24 @@ <h1>Wireframe</h1>
       </div>
     </header>
     <main>
-      <article id="1st">
+      <article id="readme-article">
         <img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/README-cURL_black_trimmed.png" alt="A black screen showing text from a readme file that has been opened">        
         <h2>Purpose of a Readme file</h2>
         <p>A Readme file is a file containing text that is often used to relay information to the user.
         </p>
         <a href="https://en.wikipedia.org/wiki/README">Read more</a>
       </article>
-      <article id="2nd">
-        <img src="https://cdn.prod.website-files.com/64fa82cbdeed167ebaefef84/64fa868c41d7a2600b45a4d5_606de8872932076fce79ad0f_TL5vrIkw1V7VYfqA3lvvi313PuvWyzIJtAQ4HthZnsXuYXQTC4rQhEcyq40qZaYDYpBHtnnPJ0PhnmBuJ9XRLnWMrlzZE9IXIfyvYan4Xj3woYXuTrAC7kTgydlqIADE8A26ITwb.png" alt="shetched images showing a plan for desnining a website, showing areas for an image, video player and other boxes for feature text and information." >
-<!-- Image from https://www.flux-academy.com/blog/20-wireframe-examples-for-web-design to help show wireframe-->        
+
+      <article id="wireframe-article">
+        <img src="https://cdn.prod.website-files.com/64fa82cbdeed167ebaefef84/64fa868c41d7a2600b45a4d5_606de8872932076fce79ad0f_TL5vrIkw1V7VYfqA3lvvi313PuvWyzIJtAQ4HthZnsXuYXQTC4rQhEcyq40qZaYDYpBHtnnPJ0PhnmBuJ9XRLnWMrlzZE9IXIfyvYan4Xj3woYXuTrAC7kTgydlqIADE8A26ITwb.png" alt="shetched images showing a plan for desnining a website, showing areas for an image, video player and other boxes for feature text and information." >  
         <h2>Purpose of a Wireframe</h2>
         <p>A wireframe is normally an image that is used to show instructions on how a website is meant to be displayed.
         </p>
         <a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more</a>
-      </article>     
-      <article id="3rd">
+      </article> 
+          
+      <article id="branch-article">
         <img src="https://docs.wavemaker.com/learn/assets/images/branching-model-121bd320dd2f5972a5f6ce2fb19a3f4e.png" alt="Connection blue balls in a straight line starting from one called Master then connection to others with lined arrow, from First is extra arrow goign up to red balls labed Bugfix then back down to third blue ball, from 2nd blue ball extra arrow goes down to two green balls labed Feature then back to last blue ball." >
-<!-- Image from https://docs.wavemaker.com/learn/blog/2021/09/17/git-branching-strategy/ to aid in display of Git Branch-->
         <h2>A branch of Git</h2>
         <p>A Branch in git is a copy of the main folder where there has been edits or fixes done to in a controlled manner that can then be implemented to the main folder in due time.
         </p>

Wireframe/style.css

@@ -24,23 +24,27 @@ As well as useful links to learn more */
   --line: 1px solid;
   --container: 1280px;
 }
+
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
 }
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
 img,
 svg {
   width: 100%;
   object-fit: cover;
 }
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -49,23 +53,27 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
 header {
   text-align:center;
   max-width: fit-content;
   margin-left: auto;
   margin-right: auto;
 }
+
 h1 {
   text-align:center;
   font-size: 4em;
   max-width: fit-content;
   font-weight: bold;
   font-family: 'Times New Roman', Times, serif;
 }
+
 #top-comment {
   text-align:center;
   margin-bottom: 20px;
 }
+
 footer {
   position: fixed;
   bottom: 0;
@@ -75,6 +83,7 @@ footer {
   background-color: rgb(28, 77, 127);
   width:100%
 }
+
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
 Inspect this in Devtools and click the "grid" button in the Elements view