fixed centering of images for project screenshots

Author: CometS1

Images/Blockchain_File_Storage_Screenshot_1.JPG

@@ -78,12 +78,13 @@ <h3>EmployRecord</h3>
         </div>
     </div>
 
-    <div class="container">
+    <div class="container text-center">
         <div class="container border border-dark rounded list-box">
             <a class="centered nav-link" href="https://github.com/CometS1/DnD_Webpage">
                 <h3>DnD Webpage</h3>
             </a>
-            <img src="Images/Dnd_Webpage_Screenshot_1.JPG" class="img-fluid list-box border border-dark" alt="DnD screenshot 1">
+            <img src="Images/Dnd_Webpage_Screenshot_1.JPG" class="img-fluid list-box-picture border border-dark"
+                alt="DnD screenshot 1">
             <p class="lead story">One of my earlier projects, this is a web app I made using HTML and CSS that is meant
                 to assist players of the roleplaying game D&D. There are a list of spell descriptions on the page, which
                 are associated with spells in the game. The easy part was making the page, the hard part was inputting
@@ -98,6 +99,8 @@ <h3>DnD Webpage</h3>
             <a class="centered nav-link" href="https://github.com/CometS1/Skale-file-storage">
                 <h3>Blockchain file storage</h3>
             </a>
+            <img src="Images/Blockchain_File_Storage_Screenshot_1.JPG" class="img-fluid list-box-picture border border-dark"
+                alt="Blockchain File Storage Screenshot 1">
             <p class="lead story">This was a project I made for a blockchain hackathon on Gitcoin. It uses Skale File
                 Storage to store data directly to your blockchain account, which allows for more secure data due to the
                 nature of blockchain. Due to complications with integrating Skale, this project is a reskin of the

projects.html

@@ -92,6 +92,15 @@ div {
   border-radius: 300px 300px 300px 300px !important;
 }
 
+.list-box-picture {
+  background-color: $secondary-color;
+  margin-bottom: 2em;
+  margin-left: 1.5em;
+  margin-right: 0;
+  border-width: 0.2em !important;
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
+}
+
 .list-box-thick {
   background-color: $secondary-color;
   padding: 5em;