correction1

public/index.html

@@ -15,50 +15,62 @@
     </header>
     <div class='container'>
       <div>
-        <img src="logo-f-secure.png" alt="fsecure" class="subimage">
+        <img src="logo-f-secure.png" alt="fsecure">
+        <div class="desc">
           <h4>ASTONISHING FEATURES REQUIRES WORRY-FREE SECURITY</h4>
           <hr>
           <p>1 YEAR FREE MOBILE SECURITY</p>
+        </div>
         <img src="image-1.png" alt="image1" class="mainimage">
       </div>
 
       <div>
-        <img src="logo-digitainment.png" alt="digit" class="subimage">
+        <img src="logo-digitainment.png" alt="digit">
+        <div class="desc">
           <h4>BE HOOKED !</h4>
           <hr>
           <p>2000+ MOVIES FROM BOLLYWOOD</p>
+        </div>
         <img src="image-2.png" alt="image2" class="mainimage">
       </div>
 
       <div>
-        <img src="logo-adaptxt.png" id="img2" alt="adaptxt" class="subimage">        
+        <img src="logo-adaptxt.png" id="img2" alt="adaptxt">
+        <div class="desc">
           <h4>THE BEST THINGS IN LIFE ARE FREE</h4>
           <hr>
-          <p>FREE MOBILE POUCH</p>        
+          <p>FREE MOBILE POUCH</p>
+        </div>
         <img src="image-3.png" alt="image3" class="mainimage">
       </div>
 
       <div>
-        <img src="logo-hungama.png" alt="hungama" class="subimage">        
+        <img src="logo-hungama.png" alt="hungama">
+        <div class="desc">
           <h4>THE THUMP NEVER ENDS HERE</h4>
           <hr>
-          <p>1000s OF SONGS</p>        
+          <p>1000s OF SONGS</p>
+        </div>
         <img src="image-4.png" alt="image4" class="mainimage">
       </div>
 
       <div>
-        <img src="logo-adaptxt.png" alt="adapt" class="subimage">        
+        <img src="logo-adaptxt.png" alt="adapt">
+        <div class="desc">
           <h4>BEING GLOBALLY YOU</h4>
           <hr>
-          <p>21 INDIAN & FOREIGN LANGUAGES</p>       
+          <p>21 INDIAN & FOREIGN LANGUAGES</p>
+        </div>
         <img src="image-5.png" alt="image5" class="mainimage">
       </div>
 
       <div>
-        <img src="logo-read-where.png" alt="read" class="subimage">        
+        <img src="logo-read-where.png" alt="read">
+        <div class="desc">
           <h4>FOR THE WISE</h4>
           <hr>
-          <p>1000 PTS DISCOUNT ON SUBSCRIPTION</p>        
+          <p>1000 PTS DISCOUNT ON SUBSCRIPTION</p>
+        </div>
         <img src="image-6.png" alt="image6" class="mainimage">
       </div>
     </div>

src/App.css

@@ -3,8 +3,8 @@ header {
   position: sticky;
   top: 0;
   background-color: #fcf8f8;
-  width: 400px;
-} 
+  width: 445px;
+}
 
 header > img {
   filter: invert(1);
@@ -13,15 +13,14 @@ header > img {
 
 .container h4 {
   color: #f4f9fd;
-  padding:0px 60px 0px 50px;  
   font-size: 24px;
   cursor: default;
+  
 }
 
 .container p {
   color: #f4f9fd;
   opacity: 0.5;
-  padding-left:45px;
   font-weight:lighter;
   cursor: default;
   font-size: 18px;
@@ -29,14 +28,13 @@ header > img {
 
 hr {
   border: 1px solid #faf8f8;  
-  width: 75%;
   margin-top: -20px;
   margin-bottom:-10px;  
 }
 
 .container > div {  
   width: 390px;
-  padding: 20px;
+  padding: 40px;
 }
 
 .container> :nth-child(1) {
@@ -59,10 +57,11 @@ hr {
 }
 
 .mainimage {  
-  padding: 40px 0px 0px 60px;
+  display: block;
+  margin: auto;
 }
 
-.subimage {
-  padding-left: 50px;
-  padding-top: 10px;
+.desc {
+  margin-bottom: 50px;
 }
+