Исправлен нейминг классов header

src/components/homePageComponents/HeaderComponent.vue

@@ -1,19 +1,19 @@
 <template lang="pug">
-  div.header-wrapper.flex.flex-row.center.space-between
+  div.header-wrapper
-    div.logo-wrapper
+    div.header-left-side
       img.logo-img(src="../../assets/images/logo.svg" alt="Logo")
-    div.flex.flex-row
+    div.header-right-side
-      div.inputs-wrapper
+      div.header-inputs-wrapper
         img.search-icon(src="../../assets/icons/search.svg" alt="Search")
-        select.inputs.select(v-model="selectedFilter")
+        select.header-inputs.select(v-model="selectedFilter")
           option(v-for="filter in filters" :key="filter" :value="filter") {{ filter }}
-        span.separator  
+        span.header-inputs-separator  
-        input.inputs.search-input(placeholder="Искать ...")
+        input.header-inputs.search-input(placeholder="Искать ...")
-      button.flex.center.btn-notification
+      button.header-buttons.btn-notification
         img.bell-icon(src="../../assets/icons/bell.svg" alt="Notifications")
-      div.flex.flex-row.center
+      div.avatar-wrapper
         img.avatar-img(:src="avatarSrc")
-        button.flex.flex-center
+        button.header-buttons.btn-down-arrow
           img.arrow-icon(src="../../assets/icons/down-arrow-2.svg" alt="Down Arrow")
 </template>
 
@@ -32,11 +32,10 @@ export default {
 </script>
 
 <style lang='sass'>
-
   input
     padding: 0 
 
-button
+  .header-buttons
     outline: none
     border: none
     background-color: transparent
@@ -45,25 +44,19 @@ button
     color: var(--font-dark-blue-color)
 
   .header-wrapper
+    display: flex
+    flex-direction: row
+    justify-content: space-between
     width: 100%
     padding: 8px 24px
     background-color: var(--bg-white-color)
     box-sizing: border-box
 
-.flex
+  .header-right-side
     display: flex
-
-.flex-row    
     flex-direction: row
 
-.center
+  .header-left-side
-  justify-content: center
-  align-items: center  
-
-.space-between    
-  justify-content: space-between
-
-.logo-wrapper
     box-sizing: border-box
     margin: 4px 0
     height: 32px 
@@ -73,7 +66,7 @@ button
     height: 32px
     width: 70px 
 
-.inputs-wrapper
+  .header-inputs-wrapper
     display: inline-block
     background-color: rgba(65, 105, 225, 0.1)
     padding: 8px 18px 8px 16px
@@ -88,6 +81,9 @@ button
     opacity: 0.7 
 
   .btn-notification
+    display: flex
+    justify-content: center
+    align-items: center  
     margin-right: 32px
 
   .arrow-icon
@@ -98,7 +94,7 @@ button
     width: 24px
     height: 24px
 
-.inputs
+  .header-inputs
     cursor: pointer
     border: none
     outline: none
@@ -132,18 +128,27 @@ button
     margin-left: 14px
     padding: 2px
 
-.separator
+  .header-inputs-separator
     display: inline-block
     vertical-align: middle
-  height: 254px
     border-left: 1px solid var(--btn-blue-color)
     opacity: 0.5
     border-radius: 4px
     height: 100%
 
+  .avatar-wrapper
+    display: flex
+    flex-direction: row
+    justify-content: center
+    align-items: center
+
+  .btn-down-arrow
+    display: flex
+    justify-content: center
+    align-items: center
+
   .avatar-img
     width: 32px
     height: 32px
     margin-right: 8px
-
 </style>