ReactJS：如何在a内填充 <footer/> ？

Question

I have a footer with a white background with a pink box image named pinkbox.png . Without any padding, the pink box image sits in the upper left corner touching the footer's border.

But to create some space between them, I did padding and the pink box gets pushed inside, but then a horizontal scroll bar appears, rather than just pushing the pink box image inside.

What could be the issue? Thank you

Here is the code:

#footer {
  background-color: white;
  z-index: 100;
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
//was trying to do padding: 15px; here

  .pink-box {
    width: 15;
    height: 15;
  }
}

And in my component:

  render(){

    return(
      <footer id="footer">
        <img
          className="pink-box"
          src="/img/pinkbox.png"
        />
      </footer>
    )
  }

Without padding:15px; :

With padding: 15px; :

Answer 1

This should work...

#footer {
  background-color: white;
  z-index: 100;
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;

  .pink-box {
    width: 15;
    height: 15;
  }
}