Content gets out of parent and goes to the next element - html

Question

I have an element with an image and some text next to it, The content is centered inside the parent.
When I try to add more elements after the image and the text, As you see the green text with red border overflows the parent .about and goes to the next parent .contact-us
Here is a fiddle to view and edit the code:
https://jsfiddle.net/04rmefx7/
Here is the code:
body,
html {
height: 100%;
}
.inline-block {
display: inline-block;
}
/* Start about */
.about {
background-color: #dad04a;
position: relative;
height: 100%
}
.about img {
height: 100px;
}
p{
border: 4px solid red;
color: green;
font-weight: bold;
}
/* End about */
/* Start contact-us */
.contact-us {
background-color: #eeb03c;
}
/* End contact-us -->
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Start about -->
<div class="about text-center">
<div class="inline-block">
<img class="pull-left" src="https://placehold.it/600">
<div class="pull-left text-left">
<h4 class="inline-block">Heading</h4>
<span>Lorem ipsum dolor sit amet</span>
<br>
<span>Lorem ipsum dolor sit amet</span>
<br>
<span>Lorem ipsum dolor sit amet</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
<br>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="clearfix"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et velit officia alias harum nam illum pariatur deleniti reprehenderit, aliquam, commodi iure modi, facilis error dolorum doloribus. Porro, hic explicabo dolores. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Dolore dolor explicabo quas, est, iure non repellendus eaque, nemo eum repudiandae voluptatem rem quos iste a. Non nisi aliquid consequuntur. Libero!</p>
</div>
<!-- End about -->
<!-- Start contact-us -->
<div class="contact-us text-center">
<h2>Contact us</h2>
</div>
<!-- End contact-us -->

Answer 1

Does it work for you to remove height: 100% from .about?