My 100% width input text box losing out border and misaligned from other contents.

Today I was having issues with the text box not aligning with other elements pixel perfectly.

The border on the right hand side is losing out. To be precise, I am exactly 2 pixel out.

The reason for this is because the input text box has a border of 1 pixel, so left + right = 2 pixel. I tried to look up on stackoverflow but it didn't went well. The proper way to do it is by setting the css box-sizing property to border-box.

By using a border box, "The width and height properties (and min/max properties) includes content, padding and border, but not the margin". Which is exactly what I needed as I want the 1 pixel border included in the width. My css now looks like this.

.input-full {
 width: 100%;
 box-sizing: border-box;
}

And now by input text box and bottons are happily aligned together.