DIV | Display Property | Not Working as expected

Seems to be a quirk of inline-block. If you add vertical-align:top; it sorts it out.

.header1{
  background-color: yellow;
  width: 35%;
  height: 200px;
  display: inline-block;
  vertical-align:top;
}
.header2{
  background-color: blue;
  width: 30%;
  height: 200px;
  display: inline-block;
  vertical-align:top;
}
.header3{
  background-color: green;
  width: 34%;
  height: 200px;
  display: inline-block;
  vertical-align:top;
}