fix some index, typo errors and delete blank spaces

Author: Dagim-Daniel

Wireframe/index.html

@@ -13,49 +13,44 @@ <h1>Wireframe</h1>
         Wireframe is low-fidelity, Visual Blueprint of a webpage or app interface.
       </p>
     </header>
-   
-    <main>
+       <main>
        <!-- what is the purpose of README article -->
       <article>
         <img src="https://www.makeareadme.com/images/open-graph-logo.png?v=20181203" alt="README image" />
         <h2>README file</h2>
-        
-        <details> <summary>The purpose of README file is to give information about the project  and how to use it 
+         <details>
+          <summary>
+            The purpose of README file is to give information about the project  and how to use it 
            </summary>
             <p> A README file is the "front door" of your project. it is typically a text file (usuallyREADME.md using Markdown) located in the root directory of your code</p>   
           </details>
         <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
       </article>
-
   <!--purpose of wireframe article-->
   <article>
     <img src="https://github.com/Dagim-Daniel/Module-Onboarding/blob/main/Wireframe/wireframe.png?raw=true" alt="">
     <h2>Purpose of Wireframe</h2>
     <details> 
       <summary> 
         It establish the basic Structure of a page. 
-         </summary>
-    <p>Wireframing is the perfect way for the designers to gauge how the user would interact with the interface. Before adding visual considerations like color or images, they serve as an outline to get the team on the same page early.</p>
+        </summary>
+         <p>wireframe is the perfect way for the designers to gauge how the user would interact with the interface. Before adding visual considerations like color or images, they serve as an outline to get the team on the same page early.</p>
     </details>
     <a href="https://medium.com/design-bootcamp/wireframes-5d63f9d760a8">Read more</a>
   </article>
-
   <!-- what is branch git article -->
   <article>
     <img src="https://cdn.iconscout.com/icon/free/png-256/free-git-branch-logo-icon-svg-download-png-1982843.png" alt="">
     <h2>Branch in Git</h2>
     <details>
       <summary>
         In Git, branch a pointer to a snapshot of your changes.
-        </summary>
-      
-    <p>Branch is like a separate working copy of your project in Git. It allows you to make changes without affecting the main branch (often called "main" or "master").</p>
+      </summary>
+        <p>Branch is like a separate working copy of your project in Git. It allows you to make changes without affecting the main branch (often called "main" or "master").</p>
     </details>
     <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
   </article>
-
     </main>
-
     <footer>
       <p>Author: Dagim Daniel :  <a href= "mailto:dagimdan19@gmail.com">dagimdan19@gmail.com</a></p>
     </footer>

Wireframe/style.css

@@ -1,16 +1,16 @@
 /* Here are some starter styles
 You can edit these or replace them entirely 
-It's showing you a common way to organise CSS 
+It's showing you a common way to organize CSS 
 And includes solutions to common problems 
 As well as useful links to learn more */
 
 /* ====== Design Palette ======
  This is our "design palette".
- It sets out the colours, fonts, styles etc to be used in this design 
+ It sets out the colors, fonts, styles etc to be used in this design 
  At work, a designer will give these to you based on the corporate brand, but while you are learning
  You can design it yourself if you like
  Inspect the starter design with Devtools
- Click on the colour swatches to see what is happening
+ Click on the color swatches to see what is happening
  I've put some useful CSS you won't have learned yet
  For you to explore and play with if you are interested
  https://web.dev/articles/min-max-clamp
@@ -47,7 +47,8 @@ footer a
 img,
 svg {
   width: 100%;
-  object-fit: cover;
+  aspect-ratio: 16/9; /* keeps the image from getting too tall or too wide */
+  object-fit: fit;
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions