flex1

public/index.html

@@ -15,7 +15,7 @@
       <img src="logo-aoc.png" alt="aoc">
     </header>
 
-    <div class='container'>
+    <div class='flex-container'>
       
       <div>
         <div class="part1">

src/App.css

@@ -10,7 +10,7 @@ header>img {
   height: 20px;
 }
 
-.container h4 {
+.flex-container h4 {
   color: #f4f9fd;
   font-size: 24px;
   cursor: default;
@@ -19,7 +19,7 @@ header>img {
 
 }
 
-.container p {
+.flex-container p {
   color: #f4f9fd;
   opacity: 0.5;
   font-weight: lighter;
@@ -33,34 +33,34 @@ hr {
   border: 1px solid #faf8f8;
 }
 
-.container>div {
+.flex-container>div {
   padding: 40px;
   min-height: calc(100vh - 50px);
   box-sizing: border-box;
 
 }
 
-.container> :nth-child(1) {
+.flex-container> :nth-child(1) {
   background-color: #62c662;
 }
 
-.container> :nth-child(2) {
+.flex-container> :nth-child(2) {
   background-color: #f7b528;
 }
 
-.container> :nth-child(3) {
+.flex-container> :nth-child(3) {
   background-color: #8760f4;
 }
 
-.container> :nth-child(4) {
+.flex-container> :nth-child(4) {
   background-color: #f18451;
 }
 
-.container> :nth-child(5) {
+.flex-container> :nth-child(5) {
   background-color: #dd5465;
 }
 
-.container> :nth-child(6) {
+.flex-container> :nth-child(6) {
   background-color: #4dc1e9;
 }
 
@@ -81,8 +81,11 @@ hr {
 }
 
 @media screen and (min-width: 540px) {
-  .container>div {
-    float: left;
+ .flex-container{
+   display: flex;
+   flex-wrap: wrap;
+ }  
+  .flex-container>div {
     width: 50%;
     height: 100vh;
     padding-top: 70px;
@@ -97,7 +100,7 @@ hr {
 }
 
 @media screen and (min-width: 780px) {
-  .container>div {
+  .flex-container>div {
     width: 33.3%;
     height: 50vh;
     overflow: hidden;
@@ -105,7 +108,7 @@ hr {
 }
 
 @media screen and (min-width: 992px) {
-  .container>div {
+  .flex-container>div {
     width: 33.3%;
     min-height: 50vh;
     padding: 2%;
@@ -123,7 +126,8 @@ hr {
 
   .part1 {
     width: 50%;
-    float: left;
+    display: flex;
+    flex-wrap: wrap;  
     margin-top: 25px;
   }
 
@@ -143,14 +147,14 @@ hr {
 
   }
 
-  .container h4 {
+  .flex-container h4 {
     text-transform: initial;
     font-size: 18px;
     font-weight: normal;
     margin: 2px;
   }
 
-  .container p {
+  .flex-container p {
     font-size: 15px;
     text-transform: uppercase;
     opacity: initial;
@@ -163,11 +167,11 @@ hr {
   }
 
   @media screen and (min-width: 1570px) {
-    .container h4 {
+    .flex-container h4 {
       font-size: 25px;
     }
 
-    .container p {
+    .flex-container p {
       font-size: 20px;
     }
 
@@ -181,4 +185,4 @@ hr {
       min-height: 500px;
     }
   }
-}
\ No newline at end of file
+}