Theprogrammersfirst: Why do the inline-blocks jump to a new line? Is it to do with previous margins?

2021-06-29

Why do the inline-blocks jump to a new line? Is it to do with previous margins?

div {
  width: calc(100vh/6);
  height: calc(100vh/6);
  background: #fdc57b;
  display: inline-block;
}

body {
  background: #62374e;
}

#a {
  margin-left: calc(14vh);
  margin-top: calc(100vh/7.2);
}

#b {
  margin-left: calc(49vw);
}

#c {
  margin-left: calc(14vh);
  margin-top: calc(161vh/5);
}

#d {
  background: #00FF22;
  margin-left: 79.3vh;
  /*This value*/
}

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

I have just started learning CSS and was playing around. On CSS battle challenge 1, part 2: Carrom, I noticed something odd: when I change 'This Value' to 79.3 the <div> moves unexpectedly from
to