flex4

src/App.css

@@ -112,10 +112,11 @@ hr {
 @media screen and (min-width: 992px) {
   .flex-container>div {
     display: flex;
-    min-height: 50vh;
+    min-height: 50px;
     padding: 2%;
     overflow: hidden;
     align-items: center;
+    justify-content: space-between;
   }
 
   header {
@@ -127,12 +128,16 @@ hr {
   }
 
   .mainimage {
-    max-height: 300px;
-    /* min-width: 150px; */
+     max-width: 100%;  
+     max-height: 300px;  
   }
 
-  .part2 {
-    margin-left: 30px;
+  .part1 {
+   min-width: 300px;
+  }
+
+  .part2{
+    flex-grow: 1;
   }
 
   .flex-container h4 {
@@ -150,20 +155,20 @@ hr {
 
   @media screen and (min-width: 1570px) {
     .mainimage {
-      margin-left: 80px;
+      min-height: 300px;
     }
   }
 
   @media screen and (min-width: 2040px) {
     .mainimage {
-      min-height: 300px;
+      min-height:350px ;
     }
     
   }
 
   @media screen and (min-width: 2380px) {
-    .mainimage {
-      min-height: 350px;
+    .flex-container >div {
+        padding-left: 100px;
     }
     
   }