Display flex elements' relations

[Deyan11]

Tell us what’s happening:
I am trying to understand somene else’s code for the purpose of learning.
Bellow code provides a perfect fit for elements: inner-container, pad-bank and drum-pad.

$padWidth: 100px;
$padHeight: 80px;
@import url('https://fonts.googleapis.com/css?family=Russo+One');

body {
  font-family: Russo One;
}

body {
  user-select: none;
  background-color: lighten(grey, 5%);
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.inner-container {
  outline: 5px solid orange;
  position: relative;
  width: 660px;
  text-align: center;
  background-color: lighten(grey, 20%);
  .pad-bank {
    border: solid red;
    width: $padWidth * 3 + 32;
    height: $padHeight * 3 + 32;
    display: inline-block;
    margin: 20px;
    .drum-pad {
      border:solid black;
      position: relative;
      float: left;
      width: $padWidth;
      height: $padHeight;
      margin-right: 10px;
      border-radius: 5px;
      padding-top: 35px;
      box-sizing: border-box;
      cursor: pointer;
    }
  }
//code...

Perfect fit looks like this:

When I change “pad-bank” element, in a way to delete +32, the code looks like this:

$padWidth: 100px;
$padHeight: 80px;
@import url('https://fonts.googleapis.com/css?family=Russo+One');

body {
  font-family: Russo One;
}

body {
  user-select: none;
  background-color: lighten(grey, 5%);
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.inner-container {
  outline: 5px solid orange;
  position: relative;
  width: 660px;
  text-align: center;
  background-color: lighten(grey, 20%);
  .pad-bank {
    border: solid red;
    width: $padWidth * 3;
    height: $padHeight * 3 + 32;
    display: inline-block;
    margin: 20px;
    .drum-pad {
      border:solid black;
      position: relative;
      float: left;
      width: $padWidth;
      height: $padHeight;
      margin-right: 10px;
      border-radius: 5px;
      padding-top: 35px;
      box-sizing: border-box;
      cursor: pointer;
    }
  }
  //code

and the screen looks like this:

Questions:
I assume I am adding 32 pixels. Correct?

How do I know I should be adding 32 to make a perfect fit and not some other number? Where does this 32 come from?

Many thanks.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36

Challenge: Build a Drum Machine

Link to the challenge:

freeCodeCamp.org

[Sylvant]

i havent used such positioning myself, id usually go with flex or grid for such shapes, or in rare cases position inline blocks, but float i dont have experience with, but from what i can assume, looking at the drum pads width, its 100px and they also have a right margin of 10 px, so to fit 3 of them, you want the container to have a width of 3x100+3x10 and there might be some spare few px units for something thats not visible on the surface. That 32px must be margins/padding, maybe even borders width, to add for the contaienr width

[Deyan11]

Spot on as usual, thanks.
Just to mention, there is ‘display: flex’ within ‘root’ section. As far as I understand, ‘root’ applies to the parent element, then it’s properties are being inherited downwards.
So, we’re dealing with ‘display: flex’ setup. This is as I understand it.

[Sylvant]

no, child elements do not inherit the display property unless explicitly stated, but they will behave as flex-children, which can alter their positioning with direct rules on the parent like flex-flow, flex-direction, justify-content and the children also have access to child-flex rules, like flex-shrink, flex-basis, align-self(similar is the case with grid). To achieve flex, or grid display in other divs, you need to explicitely change their display property to the appropriate one. You can even see in the code, .pad-bank has display “inline-block”. To have different display behavior, either you need to put display: flex, or set the display property on its immediate parent element.
From what i can tell, The CSS rules on the “root” element have the purpose to stretch it over the entire page and center its content in the middle. If the .inner-container is its flex-children, it has no flex specific properties.