How to remove this gap or merge the borders? Because the lengths are inconsistent

This happens when you have elements that have display: inline or inline-block. Since the browser treats these elements the same way as text, a line-break will be treated as white-space.

Setting the font size to 0 for the wrapper basically eliminates the whitespace, but keep in mind, that this property will be inherited to child elements, so you may have to set the font-size back to >0 for children. Also, this may break layouts that use em as unit, so keep that in mind. By also adding box-sizing: border-box the gaps are gone.

main {
  font-size: 0;
}

.shortBox {
  width: 100px;
  display: inline-block;
}
.longBox {
  width: 200px;
}
.shortBox,
.longBox {
  box-sizing: border-box;
  text-align: center;
  font-size: 20px;
  height: 50px;
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
}

 <main>
  <div class="shortBox">box1</div>
  <div class="shortBox">box2</div>
  <div class="longBox">box3</div>
</main>

There is also a possible way to use comments to prevent the auto-formatting from adding the white-space / line-break. It does not look too elegant, but it gets the job done. Also, except for the box-sizing: border-box you don't need any additional CSS for this.

.shortBox {
  width: 100px;
  display: inline-block;
}
.longBox {
  width: 200px;
}
.shortBox,
.longBox {
  box-sizing: border-box;
  text-align: center;
  font-size: 20px;
  height: 50px;
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
}

 <main>
  <div class="shortBox">box1</div><!--
  --><div class="shortBox">box2</div><!--
  --><div class="longBox">box3</div>
</main>

The third way of solving this issue is to utilize flexbox. You can create layouts like this, without having to worry about gaps because of white-spaces or line-breaks.

watch this magic:

<main>
  <div class="shortBox">box1</div><div class="shortBox">box2</div>
  <div class="longBox">box3</div>
</main>

Notice that first 2 divs are NOT divided with new line.

Then in CSS add this extra 2px like this:

.longBox {
  width: 202px;
}