Child div same size as Parent Overflows

by Ahmed Abdulrahman

HTML

<div class="parent">
    <div class="child first">
    </div>
    <div class="child second">
    </div>
  </div>

CSS

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;
}
.parent {
  background:blue;
  width:500px;
  height:40px; 
  white-space: nowrap;
}
.first {
  width:30%;
  border:4px solid red;
}
.second {
  width: 70%;
  border:4px solid pink;
  display: inline-block;
}
.child {
  height:40px;
  font-size:0px;
  display: inline-block;
}