`div` with display mode set to `inline-block` gets forced onto next line despite setting margin to 0

Suppose we have the following HTML and CSS:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
  box-sizing: border-box;
  margin: 0;
}

.left-column {
  display: inline-block;
  background-color: rgb(41, 52, 72);
  color: white;
  width: 30vw;
  height: 100vh;
  border: 5px solid red;
}

.right-column {
  display: inline-block;
  width: 70vw;
  height: 100vh;
  color: rgb(41, 52, 72);
  border: 5px solid green;
}

<!-- language: lang-html -->

<div class="left-column">
</div>

<div class="right-column"></div>

<!-- end snippet -->

I am setting the width of the div with class left-column to 30% of the viewport width, and the width of the div with class right-column to 70% of the viewport width. Since I'm using border box sizing, an overall margin of 0 and display mode to inline-block I expect for these boxes to appear adjacent to each other in the inline direction. Strangely, the div with class right-column appears underneath the div with class left-column.

I feel like I am not accounting for some additional horizontal space which somehow gets rendered and forces the right-column onto the next line. What am I missing here?

A scroll bar also takes up space horizontal space.
Here is an example that hides the scroll bar for webkit based browsers.

You should see that they align next to each other.
(i've also removed any enters/spaces between the <div> elements, these take up space as well, like @kosh mentioned.)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

::-webkit-scrollbar {
  display: none;
}

* {
  box-sizing: border-box;
  margin: 0;
}

.left-column {
  display: inline-block;
  background-color: rgb(41, 52, 72);
  color: white;
  width: 30vw;
  height: 100vh;
  border: 5px solid red;
}

.right-column {
  display: inline-block;
  width: 70vw;
  height: 100vh;
  color: rgb(41, 52, 72);
  border: 5px solid green;
}

<!-- language: lang-html -->

<div class="left-column">
</div><div class="right-column"></div>

<!-- end snippet -->

flex-box

You might be able to use flex-box to achieve the same without having to worry about scroll bars.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  display: flex;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.left-column {
  flex: 30 30 auto;
  background-color: rgb(41, 52, 72);
  color: white;
  height: 100vh;
  border: 5px solid red;
}

.right-column {
  flex: 70 70 auto;
  height: 100vh;
  color: rgb(41, 52, 72);
  border: 5px solid green;
}

<!-- language: lang-html -->

<div class="left-column">
</div>

<div class="right-column"></div>

<!-- end snippet -->

Here you go...

1. add border-box to all elements and before and after
2. Use % for width as vw/vh counts full viewport size including scrollbar etc.
3. set font size to 0
4. do not add any space, whitespace in between the inline-block elements

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
}

.left-column {
  display: inline-block;
  background-color: rgb(41, 52, 72);
  color: white;
  width: 30%;
  height: 100vh;
  border: 5px solid red;
}

.right-column {
  display: inline-block;
  width: 70%;
  height: 100vh;
  color: rgb(41, 52, 72);
  border: 5px solid green;
}
.left-column, .right-column {
  font-size: 0px;
}

<!-- language: lang-html -->

<div class="left-column"></div><div class="right-column"></div>

<!-- end snippet -->