Updated without Flexbox & Grid

CSS/style.css

 * {
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
 }
 
 html,
@@ -12,30 +11,44 @@ body {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
-.row>div:nth-child(1) {
+.container>div:nth-child(1) {
     background-color: #41ca6e;
 }
 
-.row>div:nth-child(2) {
+.container>div:nth-child(2) {
     background-color: #fab153;
 }
 
-.row>div:nth-child(3) {
+.container>div:nth-child(3) {
     background-color: #7277d5;
 }
 
-.row>div:nth-child(4) {
+.container>div:nth-child(4) {
     background-color: #f87d51;
 }
 
-.row>div:nth-child(5) {
+.container>div:nth-child(5) {
     background-color: #ed5466;
 }
 
-.row>div:nth-child(6) {
+.container>div:nth-child(6) {
     background-color: #4ec2e7;
 }
 
+.container {
+    margin: 0 auto;
+    height: 100%;
+    width: 100%;
+}
+
+.card {
+    display: inline-block;
+    margin-right: -0.25em;
+    margin-bottom: -0.25em;
+    width: calc(100%/3);
+    height: calc(100%/2);
+    position: relative;
+}
 
 .hline {
     width: 10rem;
@@ -44,18 +57,16 @@ body {
     margin: 10px 0 10px 0;
 }
 
-.row .column {
-    float: left;
-    width: 33.33%;
-    padding: 10px;
-    height: 475px;
-    position: relative;
-    display: flex;
-    /* flex-direction: row; */
+.main-logo {
+    position: absolute;
+    width: 15%;
+    margin: 5% 0 0 5%;
 }
 
 .desc {
-    margin: 10rem 0 0 5rem;
+    display: inline-block;
+    position: absolute;
+    margin: 30% 0 0 15%;
 }
 
 .title {
@@ -71,37 +82,28 @@ body {
 }
 
 .logo {
-    width: 55px;
+    width: 23%;
 }
 
-.main-logo {
-    position: absolute;
-    width: 15%;
-    margin: 15px 0 0 15px;
-}
 
-.column .images {
-    box-sizing: border-boxs;
-    width: 35%;
-    margin-left: 18rem;
-    margin-top: 5rem;
+.card .images {
     position: absolute;
-    /* display: flex; */
+    width: 30%;
+    margin: 10% 0 5% 65%;
 }
 
-.row .column .image1 {
-    width: 40%;
-    margin-left: 17rem;
+.image1 {
+    /* float: right; */
+    width: 35%;
+    margin: 20% 0 5% 59%;
     position: absolute;
-    margin-top: 7rem;
 }
 
-.row .column .image2 {
+.container .card .image2 {
     position: absolute;
-    height: 35%;
+    height: 45%;
     width: 50%;
-    margin-left: 15rem;
-    margin-top: 10rem;
+    margin: 30% 0 0 48%;
 }
 
 .only-mobile {
@@ -121,51 +123,53 @@ body {
 
 .logo-mobile img {
     filter: grayscale(1) invert(1);
-    margin: 20px 0 20px 15px;
+    margin: 5% 0 5% 5%;
     height: 22px;
 }
 
 .mobile-container {
+    margin: auto;
     width: 100%;
     height: 100%;
     background-color: #41ca6e;
+    position: relative;
 }
 
 .mobile-image {
     width: 50%;
-    margin: 2rem 5rem 0 5rem;
+    margin: 10% 0 0 25%;
     position: absolute;
 }
 
 .mobile-logo {
     width: 15%;
-    margin: 2rem 0 1rem 4rem;
+    margin: 10% 0 5% 15%;
 }
 
 .mobile-title {
+    display: block;
     text-transform: uppercase;
     font-weight: 650;
     font-size: larger;
-    margin: 0 0 0 4rem;
+    margin: 0 0 0 15%;
 }
 
 .mobile-hline {
     width: 14rem;
     height: 1.5px;
     background: white;
-    margin: 10px 0 10px 4rem;
+    margin: 3% 0 3% 15%;
 }
 
 .mobile-offer {
     text-transform: uppercase;
     font-weight: 50;
-    font-size: 17px;
-    margin: 0 0 0 4rem;
+    margin: 0 0 0 15%;
 }
 
 .arrow {
     position: absolute;
-    margin: 5rem 0 0 1.5rem;
+    margin: 15% 0 0 5%;
     border: solid white;
     border-width: 0 2px 2px 0;
     display: inline-block;
@@ -174,52 +178,69 @@ body {
 
 .right {
     transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
+    display: inline-block;
+    margin-left: 86%;
 }
 
 .left {
     transform: rotate(135deg);
-    -webkit-transform: rotate(135deg);
-}
-
-.right-arrow {
-    margin-left: 17rem;
 }
 
 .dot {
+    display: inline-block;
     height: 10px;
     width: 10px;
     background-color: white;
     border-radius: 50%;
     position: absolute;
-    margin: 20rem 0 0 10rem;
+    margin: 80% 0 0 45%;
 }
 
 .circle {
-    position: absolute;
-    width: 10px;
+    display: inline-block;
+    width: 6px;
     padding-bottom: 5px;
     border-radius: 50%;
     border: 3px solid white;
-    margin: 20rem 0 0 11rem;
+    margin: 80% 0 0 49%;
 }
 
+/* Media Query for Mobile Devices */
+@media (max-width: 480px) {
+    .container {
+        display: none;
+    }
 
+    .only-mobile {
+        width: 100%;
+        display: contents;
+    }
+}
 
-@media screen and (max-width: 992px) {
+/* Media Query for low resolution  Tablets, Ipads */
+@media (min-width: 481px) and (max-width: 767px) {
+    .card {
+        width: 50%;
+    }
+}
 
-    .row .column {
+/* Media Query for Tablets Ipads portrait mode */
+@media (min-width: 768px) and (max-width: 1024px) {
+    .card {
         width: 50%;
     }
 }
 
-@media screen and (max-width: 600px) {
-    .row .column {
-        display: none;
+/* Media Query for Laptops and Desktops */
+@media (min-width: 1025px) and (max-width: 1280px) {
+    .card {
+        width: 33.33%;
     }
+}
 
-    .only-mobile {
-        width: 100%;
-        display: contents;
+/* Media Query for Large screens */
+@media (min-width: 1281px) {
+    .card {
+        width: 33.33%;
     }
 }
\ No newline at end of file

desktop.html

@@ -10,8 +10,8 @@
 </head>
 
 <body>
-    <div class="row">
-        <div class="column">
+    <div class="container">
+        <div class="card">
             <img class="main-logo" src="/Logos/logo-aoc.png" alt="logo-aoc">
             <div class="desc">
                 <img class="logo" src="/Logos/logo-f-secure.png" alt="logo-f-secure">
@@ -26,7 +26,7 @@
             <img class="image1" src="/Images/image-1.png" alt="image-1">
         </div>
 
-        <div class="column">
+        <div class="card">
             <div class="desc">
                 <img class="logo" src="/Logos/logo-digitainment.png" alt="logo-f-secure">
                 <div class="title">
@@ -40,7 +40,7 @@
             <img class="images" src="/Images/image-2.png" alt="image-2">
         </div>
 
-        <div class="column">
+        <div class="card">
             <div class="desc">
                 <img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
                 <div class="title">
@@ -54,7 +54,7 @@
             <img class="images" src="/Images/image-3.png" alt="image-3">
         </div>
 
-        <div class="column">
+        <div class="card">
             <div class="desc">
                 <img class="logo" src="/Logos/logo-hungama.png" alt="logo-f-secure">
                 <div class="title">
@@ -68,7 +68,7 @@
             <img class="images" src="/Images/image-4.png" alt="image-4">
         </div>
 
-        <div class="column">
+        <div class="card">
             <div class="desc">
                 <img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
                 <div class="title">
@@ -82,7 +82,7 @@
             <img class="images" src="/Images/image-5.png" alt="image-5">
         </div>
 
-        <div class="column">
+        <div class="card">
             <div class="desc">
                 <img class="logo" src="/Logos/logo-read-where.png" alt="logo-f-secure">
                 <div class="title">
@@ -117,9 +117,7 @@
             </div>
 
             <div class="arrow left"></div>
-            <div class="right-arrow">
-                <div class="arrow right"></div>
-            </div>
+            <div class="arrow right"></div>
 
             <img class="mobile-image" src="/Images/image-1.png" alt="image-1">