title: box-sizing not getting applied
body: <p>I am trying to create a navigation bar and I've set a padding to it, but due to this padding, my contents are getting outside the limits of the page, and the box-sizing seems not to be applied.</p>
  <pre><code>.med-navbar {
      width: 100%;
      height: 15rem;
      box-shadow: atomicItemStyle.$boxShadow;
      display: flex;
      flex-shrink: 1;
      justify-content: space-between;
      align-items: center;
      padding: 0 2rem;
      box-sizing: inherit;
  
      &amp;__brandName {
          font-size: 3rem;
          font-weight: 900;
      }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/0hqZ2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0hqZ2.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/8KTtW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8KTtW.png" alt="enter image description here" /></a></p>