images aligned

index.css

@@ -34,38 +34,45 @@
     color: black;
 }
 
-/* 4 images part */
+.images-container {
-.images-container{
     width: 90%;
-    height:20%;
+    margin: auto;
-    margin:auto; 
     overflow: hidden;
+}
+
+.half-size {
+    width: 43%;
+    height: 140pt;
+    float: left;
+    text-align: center;
+    line-height: 140pt;
      margin: 1%;
 }
 
-.images-container .half-size{
+.quarter-size {
+    width: 21%;
+    height: 140pt;
     float: left;
-    width: 50%;
+    text-align: center;
-    height: 100%;
+    line-height: 140pt;
+     margin: 1%;
 }
 
-.images-container .quarter-size{
+.image-column-container {
+    width: 24%;
+    height: 140pt;
     float: left;
-    width: 25%;
-    height: 100%;
 }
 
-.images-container .image-column-container{
+.image-column-container > div {
-    float: left;
+    width: 100%;
-    width: 25%;
+    height: 48%;
-    height: 100%;
+    margin: 1%;
+    text-align: center;
+    line-height: 96px;
+    margin-bottom: 4%;
 }
 
 .images-container img{
-    width: 100%;
+    width: 38vmax;
-    height: 100%;
-}
-
-.image-column-container div{
-    height: 50%;
 }

index.html

@@ -32,6 +32,7 @@
         </a>
     </div>
 
+    
     <div class="images-container">
         <div class="half-size">
             <img src="./images/arduino.png" alt="Arduino">