Does anyone know why there’s a little white margin on top and on the right of the button?

HTML:

<form class="flex form" action="">  
  <input class="email-box" type="email" id="email" name="email" placeholder="Email Address">  
  <button class="arrow-button" type="submit"><img src="images/icon-arrow.svg" alt="arrow"></button>  
</form> 

CSS:

.form {
    border: 1px solid hsl(0, 36%, 70%);
    border-radius: 4rem;
    overflow: hidden;}

.email-box {
    padding: 1.6rem 2.8rem;
    flex: 1;width: 100%;
    border: 0;}

.arrow-button {
    cursor: pointer;
    float: right;
    border: none;
    background-color: hsl(0, 80%, 86%);
    padding: 0 2rem;}

picture of the button

The button shouldn’t have the white margin on the top and on the right.