Why are input fields wider than it's parent div?

Question

Why is a form input field wider than its parent div? The width is applied on the text div but not on the div with the form field in it. Why is that the case?

See the livecode here.

.parent {
  width: 400px;
  background-color: yellow;
}

.left {
  display: inline-block;
  width: 50%;
  background-color: red
}

.right {
  display: inline-block;
  width: 30%;
  background-color: blue
}

<div class="parent">
  <div class="left">This is text</div>
  <div class="right"><input type="text"></div>
  <div class="left">This is text</div>
  <div class="right">text</div>
</div>

Answer 1

Make sure you set the max-width of the input field to 100% and box-sizing to border-box to make sure padding and border fall within that 100%:

input {
    max-width: 100%;
    box-sizing: border-box;
}

.parent {
  width: 400px;
  background-color: yellow;
}

.left {
  display: inline-block;
  width: 50%;
  background-color: red
}

.right {
  display: inline-block;
  width: 30%;
  background-color: blue
}

<div class="parent">
  <div class="left">This is text</div>
  <div class="right"><input type="text"></div>
  <div class="left">This is text</div>
  <div class="right">text</div>
</div>