add actions in header

.

components/header/header.html

@@ -1,10 +1,15 @@
 <header class="component-header">
 
-  <div class="container d-flex h-100">
-    <div class="hamburger hamburger--spin my-auto">
+  <div class="container header-wrapper">
+    <button class="hamburger hamburger--spin my-auto">
       <span class="hamburger-box">
         <span class="hamburger-inner"></span>
       </span>
+    </button>
+
+    <div class="actions">
+      <button class="icon icon-user"></button>
+      <button class="icon icon-cart"><span class="qty">3</span></button>
     </div>
 
     <ul class="menu">

components/header/header.scss

@@ -11,11 +11,46 @@
   background: $olive;
   color: $white;
 
+  .header-wrapper {
+    display: flex;
+    position: relative;
+
     .hamburger {
       display: flex;
       margin-right: 20px;
     }
 
+    .actions {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      .icon {
+        position: relative;
+        margin: 0 5px;
+        padding: 0;
+        background: none;
+        border: none;
+        color: $white;
+        font-size: $font-24;
+
+        .qty {
+          position: absolute;
+          top: -5px;
+          right: -5px;
+          height: 15px;
+          width: 15px;
+          border-radius: 50%;
+          background: $orange;
+          color: $white;
+          font-size: $font-12;
+          line-height: $font-16;
+          font-family: $font-sans;
+        }
+      }
+    }
+
     .menu {
       display: none;
       list-style: none;
@@ -86,6 +121,7 @@
         transform: translateX(0%);
       }
     }
+  }
 }
 
 
@@ -95,6 +131,27 @@
   .component-header {
     height: $header-height;
 
+    .header-wrapper {
+      .actions {
+        position: absolute;
+        right: 0;
+
+        .icon {
+          margin: 0 5px;
+          font-size: $font-30;
+
+          .qty {
+            position: absolute;
+            top: -15px;
+            right: -15px;
+            height: 25px;
+            width: 25px;
+            font-size: $font-20;
+            line-height: $font-24;
+          }
+        }
+      }
+
       .menu {
         display: flex;
       }
@@ -104,4 +161,5 @@
         height: calc(100vh - #{$header-height});
       }
     }
+  }
 }

src/scss/global.scss

@@ -26,6 +26,11 @@ button {
     outline: none;
     text-decoration: none;
   }
+
+  &::-moz-focus-inner {
+    border: 0 !important;
+  }
+
 }
 
 .font-serif {
@@ -101,7 +106,11 @@ button {
 .main-content {
 
   min-height: calc(100vh - #{$footer-height});
+  padding: $header-height-mobile 40px 0 40px;
+
+  @media (min-width: map-get($grid-breakpoints, 'md')) {
     padding: $header-height 40px 0 40px;
+  }
 
   &.container-fluid {
     &.full-width {