How to horizontally align layered icons in Font Awesome 5?

I am trying to place an icon ontop off another icon in fontawesome using layers and I would like the icons to be horizontally aligned. If I use the default icon size it works however when I increase the icon sizes (fa-4x) the icons are not horizontally aligned. Please see https://jsfiddle.net/u7qc53ge/1/

body {
  font-size: 16px;
  padding: 4rem;
}

<script type="text/javascript" src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>

<!-- this works -->
<span class="fa-layers fa-fw">
  <i class="fas fa-ban"></i>
  <i class="fab fa-facebook-f"></i>
</span>

<!-- this does not -->
<span class="fa-layers fa-fw">
  <i class="fas fa-ban fa-4x"></i>
  <i class="fab fa-facebook-f fa-4x"></i>
</span>

Solution

you need to use fa-4x on the parent element:

body {
  font-size: 16px;
  padding: 4rem;
}

<script type="text/javascript" src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
<span class="fa-layers fa-fw">
  <i class="fas fa-ban"></i>
  <i class="fab fa-facebook-f"></i>
</span>


<span class="fa-layers fa-fw fa-4x">
  <i class="fas fa-ban "></i>
  <i class="fab fa-facebook-f "></i>
</span>