fix: added more space to the cards

Author: KaraHowes

README.md

@@ -3,7 +3,7 @@
 The aim of this project was to build a GitHUb tracker of my projects submitted thus far to Technigop, using fetch and API technologies from the GitHub database
 ## The problem
 
-I approached the problem in 2 main steps: first extracting data from a -filtered-API fetch of all of my forked projects from Technigo. I was then able to hard-code a crad to present this data. I secondly then performed another fetch to extract the pull-requests from the Technigo repositories, to FIND all of my commit message for each submitted project. I then used dynamic-ids to input this data into my pre-coded index-card. Using Chart.js, I compiled a doughnut chart to illustrate the percentage of projects completed thus far. I have fulfilled all blue requirements, if I had more time I would like to show the last commit message and maybe a few comments.    
+I approached the problem in 2 main steps: first extracting data from a -filtered-API fetch of all of my forked projects from Technigo. I was then able to hard-code a card to present this data. I secondly then performed another fetch to extract the pull-requests from the Technigo repositories, to FIND all of my commit message for each submitted project. I then used dynamic-ids to input this data into my pre-coded index-card. Using Chart.js, I compiled a doughnut chart to illustrate the percentage of projects completed thus far. I have fulfilled all blue requirements, if I had more time I would like to show the last commit message and maybe a few comments.    
 
 
 ## View it live

code/script.js

@@ -44,21 +44,21 @@ const getRepos = ()=>{
         forkedProjects.forEach(repo => cardsContainer.innerHTML += `
         <section class="js-card">
           <div class="card-projectname" id="cardProjectName">   
-          Project Name: <span class="space">${repo.name}</span></div>
+          <span class="space">Project Name:<span> <span class="space">${repo.name}</span></div>
           <div class="updated" id="cardUpdated">
-          Most recent update:<span class="space"> ${new Date(repo.pushed_at).toDateString()}</span>   
+          <span class="space">Most recent update:<span><span class="space"> ${new Date(repo.pushed_at).toDateString()}</span>   
           </div>
           <div class= "branch" id="cardBranch">
-          Name of default branch:<span class="space">${repo.default_branch}</span>    
+          <span class="space">Name of default branch:<span><span class="space">${repo.default_branch}</span>    
           </div>
           <div class= "URL" id="cardURL">
-          URL: <span class="space"><a href="${repo.html_url} ">Clicky</span></a> 
+          <span class="space">URL:<span> <span class="space"><a href="${repo.html_url} ">Clicky</span></a> 
           </div>
           <div class= "number-commits" id="commit-${repo.name}">
-          Number of Commits:  
+          <span class="space">Number of commits:<span>  
           </div>
           <div class= "times-forked" id="cardForked">
-          Number of times forked:<span class="space">${repo.forks}</span>  
+          <span class="space">Number of times forked:<span><span class="space">${repo.forks}</span>  
           </div>
         </section>`
     )

code/style.css

@@ -131,7 +131,7 @@ body {
 
 /* This is the span styling*/
 .space {
-  margin-left: 8px;
+  margin-left: 18px;
   color: #87bee7;
 }