Add border to div increase div width?

What you have stumbled across is the foundation of the CSS box-model.

You can play with it using the box-sizing property which has two possible values:

1. content-box (default)
2. border-box

content-box Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are
not included

border-box The width and height properties (and min/max properties) includes content, padding and border, but not the margin

(source: W3Schools.com)

By default, the border will add on to your container width/height.

See what happens when you use border-box:

.test{
  width:300px;
  height:auto;
  background-color:#A8F9C0;
  float:left;
  border:2px solid black;
  box-sizing: border-box;
}

<div class="test">
</div>

This will ensure the width stays the same and inlcudes the box border.