Adding "display: flex" to the footer of my React app adds whitespace below it, why is this happening?

Like the title says, when I add display: flex to the footer CSS of my app, extra whitespace appears at the bottom of the page, and scrolling is enabled. It seems to be caused by a span within the footer that has a margin of 1rem. The span doesn't cause a problem when display isn't flex, so does flexbox just interpret margins differently? And how do I prevent the extra space from appearing?

Also, I expected the whitespace to be associated with the React root div, because that's where the footer is, but upon inspection it seems to be attached to the body of the page as can be seen here. Why is this?

Despite Googling I couldn't figure out why this was happening, so sorry if this is a super simple fix and I've just missed the answer!

Here are the snippets of my footer code:

HTML

<div className="Palette">
  <Navbar level={level} changeLevel={this.changeLevel} handleChange={this.changeFormat}/>
  <div className="Palette-colours">
    {colourBoxes}
  </div>
  <footer className='Palette-footer'>
    {paletteName}
    <span className='emoji'>{emoji}</span>
  </footer>
</div>

CSS

.Palette {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.Palette-footer {
  background: white;
  height: 5vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: bold;
}

.emoji {
  font-size: 1.5rem;
  margin: 1rem;
}

Thank you for your help :)