Fix css

Author: Serhii Hultiaieev

src/app/core/cart-count-controls/cart-count-controls.component.scss

@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}

src/app/products/product-item/product-item.component.html

@@ -5,11 +5,11 @@
     </div>
   </div>
 
-  <header>
+  <mat-card-header>
     <mat-card-title>
       {{ product.title }}
     </mat-card-title>
-  </header>
+  </mat-card-header>
 
   <mat-card-content>
     <p>{{ product.price | number: "1.2-2" | currency }}</p>

src/app/products/products.component.scss

@@ -1,6 +1,6 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins/breakpoints";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins/breakpoints";
 
 .container {
   display: grid;

src/styles.scss

@@ -5,12 +5,12 @@ body {
   height: 100%;
 }
 
-@import "~bootstrap/scss/bootstrap-reboot";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/utilities";
-@import "~bootstrap/scss/bootstrap-grid";
-@import "~bootstrap/scss/type";
+@import "bootstrap/scss/bootstrap-reboot";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/bootstrap-grid";
+@import "bootstrap/scss/type";
 
 body {
   overflow-y: scroll;