diff --git a/components/core/header/Header.vue b/components/core/header/Header.vue
index 6494a6088f..4d86d51a0f 100644
--- a/components/core/header/Header.vue
+++ b/components/core/header/Header.vue
@@ -25,8 +25,8 @@
 import HomeIcon from './HomeIcon'
 import NavBar from './nav-bar/NavBar'
 import NavBarHamburger from './nav-bar/NavBarHamburger'
-import ScrollableNavBar from './nav-bar/ScrollableNavBar'
 import LocaleSwitch from './locale-switch/LocaleSwitch'
+import ScrollableNavBar from './nav-bar/ScrollableNavBar'
 export default {
     name: 'CoreHeader',
     components: {
@@ -47,7 +47,7 @@ export default {
 }
 
 .header__nav-bar {
-    @apply flex w-full items-center justify-between px-4;
+    @apply flex w-full items-center justify-between px-2;
     pointer-events: auto; /*enable click-through ScrollableNavBar*/
 }
 .header-container,
diff --git a/components/core/header/HomeIcon.vue b/components/core/header/HomeIcon.vue
index e86bdb26b0..3067a17fe4 100644
--- a/components/core/header/HomeIcon.vue
+++ b/components/core/header/HomeIcon.vue
@@ -1,7 +1,7 @@
 <template>
     <locale-link
         to="/"
-        class="core-homeIcon flex items-center justify-center py-2 md:px-8"
+        class="core-homeIcon flex items-center justify-center py-2 md:px-4"
         customized
     >
         <img
@@ -35,5 +35,6 @@ export default {
 <style scoped>
 .core-homeIcon {
     @apply text-pink-700;
+    flex-shrink: 0;
 }
 </style>
diff --git a/components/core/header/locale-switch/LocaleSwitch.vue b/components/core/header/locale-switch/LocaleSwitch.vue
index ae0268fa84..7ebf9b5a87 100644
--- a/components/core/header/locale-switch/LocaleSwitch.vue
+++ b/components/core/header/locale-switch/LocaleSwitch.vue
@@ -47,6 +47,7 @@ export default {
 <style lang="postcss" scoped>
 .core-localeSwitch {
     @apply font-bold;
+    flex-shrink: 0;
 }
 .core-localeSwitch:hover {
     @apply text-pink-700;
diff --git a/components/core/header/nav-bar/NavBar.vue b/components/core/header/nav-bar/NavBar.vue
index 719f2f611d..d2d9fbebb9 100644
--- a/components/core/header/nav-bar/NavBar.vue
+++ b/components/core/header/nav-bar/NavBar.vue
@@ -182,7 +182,7 @@ export default {
                 'h-full': isLink,
                 'justify-center': isLink,
                 'items-center': isLink,
-                'px-8': isLink,
+                'px-4': isLink,
                 'py-2': isLink,
                 'bg-transparent': !isOnCurrentPath,
                 '--active': isOnCurrentPath,
diff --git a/components/core/header/nav-bar/NavBarItemDropdown.vue b/components/core/header/nav-bar/NavBarItemDropdown.vue
index 0598bab9bd..d80ecdedcc 100644
--- a/components/core/header/nav-bar/NavBarItemDropdown.vue
+++ b/components/core/header/nav-bar/NavBarItemDropdown.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="relative flex h-full items-center justify-center px-8 text-left"
+        class="relative flex h-full items-center justify-center px-5 text-left"
         @mouseenter="showMenu"
         @mouseleave="hideMenu"
     >
diff --git a/components/core/header/nav-bar/ScrollableNavBar.vue b/components/core/header/nav-bar/ScrollableNavBar.vue
index 523ad2c078..f5e18dcd19 100644
--- a/components/core/header/nav-bar/ScrollableNavBar.vue
+++ b/components/core/header/nav-bar/ScrollableNavBar.vue
@@ -100,7 +100,7 @@ export default {
 .core-scrollableNavBar,
 .core-scrollableNavBar__scroll,
 .core-scrollableNavBar__slot {
-    @apply h-full w-full;
+    @apply h-full max-w-full;
 }
 .core-scrollableNavBar__left-arrow,
 .core-scrollableNavBar__right-arrow {