header is responsive

src/styles/base/header.scss

@@ -8,13 +8,10 @@
   display: flex;
   flex-shrink: 0;
   // padding: 1.6rem 0.64rem;
+  padding: 0 2.5rem;
   position: relative;
   z-index: 1;
 
-  > *:not(sib-widget) {
-    padding: 0 2.5rem;
-  }
-
   #logo {
     flex: 1 1 0;
   }
@@ -58,9 +55,20 @@
       }
     }
   }
+
+  sib-notifications {
+
+    @include breakpoint(sm) {
+      padding: 0;
+    }
+  }
   
   details {
     margin-right: 2.5rem;
+
+    @include breakpoint(sm) {
+      margin-right: 0;
+    }
   
     summary {
   
@@ -142,6 +150,10 @@
           margin-right: 2rem;
           overflow: hidden;
           width: 4.8rem;
+
+          @include breakpoint(sm) {
+            margin-right: 0;
+          }
         }
 
         img {
@@ -246,6 +258,7 @@
 
     @include breakpoint(sm) {
       display: block;
+      padding-left: 0;
     }
   }
 }