I have this code:

<style>
.Button
{
   padding-top: 21px;
   padding-bottom: 21px;
   border-style: solid;
   width: 100%;
   padding-left: 0px;
   padding-right: 0px;
   display: table;
}
</style>

<a class="Button">Test</a>

This works ok. As you resize the browser, you will see the border of the link to adjust as well.

Try changing the padding-left to this:

   padding-left: 10px;

See how this affects the right margin.

This is under IE 11. I also obtained the same behavior under Firefox.

Anyone can explain this and how to workaround this?

You can try it here: https://jsfiddle.net/c98vuy0L