It does apply the right margin on the button unless you specify not to apply it. Just to show it better, added the inline-block div in the middle with the border.

https://jsfiddle.net/saravananchandru/es6rbpfu/2/

<div class="button-box">
    <div class="button-box-inner">
        <button type="submit">Send</button>
        <button type="reset">Reset</button>  
    </div>
</div>

.button-box {
  text-align: center;
}

.button-box-inner {
  display: inline-block;
  border: 1px solid red;
}

.button-box button {
    margin-right:50px;
    font-size:15px;
}

.button-box button {
  margin-right: 50px;
  font-size: 15px;
}

<div class="button-box">
  <button type="submit">Send</button>
  <button type="reset">Reset</button>
</div>

Note that, the button-box div is part of a larger container that has both buttons centralized in the middle of the page.

Now, using margin-right for example, only the left button (send) moves left, while the right button next to it (reset) doesn’t move. At first, i thought that’s because the code first applies to the first button, and since the margin adds space between the button and the next element, which is the next button, the margin-right is then added between the first button and the second one, and the second one doesn’t move because when the margin is added between it and the rest of the right space, there is no space leftwards to move, because the left button hasn’t moved yet.

But that doesn’t seem to explain why is it that if i add a big margin to the right or left, and then add just a little bit more, there is space for the second button to move too, but it doesn’t. I don’t understand why?