Align challenge 2 with solution in video

Author: Ronan

starter/04-CSS-Layouts/challenge-2/index.html

@@ -16,7 +16,7 @@ <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
           class="product-img"
         />
         <div class="product-info">
-          <div class="product-info-header">
+          <div class="product-price">
             <p class="price"><strong>$65.00</strong></p>
             <p class="shipping">Free shipping</p>
           </div>
@@ -26,7 +26,7 @@ <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
             everyday wardrobe staple.
           </p>
           <a class="more-info" href="#">More information &rarr;</a>
-          <div class="colors">
+          <div class="product-colors">
             <div class="color"></div>
             <div class="color color-blue"></div>
             <div class="color color-red"></div>

starter/04-CSS-Layouts/challenge-2/styles.css

@@ -53,44 +53,36 @@ p {
 }
 
 .product-img {
-  /* float: left; */
-  /* margin-right: 40px; */
 }
 
 /* PRODUCT INFO */
 
 .product-info {
-  /* margin-right: 40px; */
+  flex: 1;
   margin-top: 20px;
-  /* width: 243px; */
-  /* float: left; */
 }
 
-.product-info-header {
+.product-price {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
 }
 
 .price {
   font-size: 20px;
-  /* margin-bottom: 5px; */
-  /* float: left; */
+  margin-bottom: 0;
 }
 
 .shipping {
   text-transform: uppercase;
   color: #777;
   font-size: 12px;
   font-weight: bold;
-  /* margin-top: 4px;
-  margin-bottom: 20px;
-  margin-left: 20px; */
-  /* float: right; */
+  margin-bottom: 0;
 }
 
 .product-description {
-  clear: both;
 }
 
 .more-info:link,
@@ -105,20 +97,17 @@ p {
   text-decoration: none;
 }
 
-.colors {
+.product-colors {
   display: flex;
   gap: 10px;
 }
 
 .color {
-  width: 20px;
-  height: 20px;
-  /* display: inline-block; */
-  /* margin: 0 5px; */
+  width: 22px;
+  height: 22px;
 }
 
 .color:first-child {
-  /* margin-left: 0; */
   background-color: rgb(66, 66, 66);
 }
 
@@ -140,14 +129,13 @@ p {
 
 .color-brown {
   background-color: rgb(125, 83, 28);
-  margin-right: 0;
 }
 
 /* PRODUCT DETAILS */
 
 .product-details {
-  flex: 0 0 215px;
-  /* float: left; */
+  /* flex: 0 0 215px; */
+  flex: 1;
   margin-top: 20px;
 }
 
@@ -165,6 +153,7 @@ p {
 .details-list li {
   margin-bottom: 10px;
 }
+
 /* Button */
 
 .add-to-cart {