Height of heading element is more than expected [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I've got this html here:
#books {
margin-top: 4rem;
}
<div class="row">
<div class="col-lg-10 col-lg-offset-1 well">
<h1 class="text-center">Brian Jacques</h1>
<h3 class="text-center"><i>The scribe who was an abbot to all his readers</i></h3>
<figure class="figure col-lg-12">
<div class="img-thumbnail col-lg-10 col-lg-offset-1">
<img src="http://i1378.photobucket.com/albums/ah88/ejacobosaur/Brian%20Jacques%20Cartoonized_zpsz412eynr.jpg" class="img-responsive figure-img img-fluid" alt="Brian Jacques cartoon">
<figcaption class="figure-caption text-center">Jacques smiling. A radiance that shines through his books. Painted by Derek Wehrwein. </figcaption>
</div>
</figure>
<h2 class="text-center" id="books">Widely Known For
</h2>
<div class="row">
<div class="col-lg-6 text-center">
Redwall
</div>
<div class="col-lg-6 text-center">
Castaways of the Flying Dutchman
</div>
</div>
<blockquote>
<p class="text-center lead"><em>"So here is my story, may it bring<br>Some smiles and a tear or so,<br>It happened once upon a time,<br>Far away, and long ago,<br>Outside the night wind keens and wails,<br>Come listen to me, the Teller of Tales!"</em></p>
<footer class="text-center">Brian Jacques,<cite title="Lord Brocktree"> Lord Brocktree</cite></footer>
</blockquote>
</div>
</div>
The part concerning my question is the h2 tag that is directly under the closing figure tag and has the text "Widely Know For".
I've been trying to add top margin to this element (h2) but have had no success. When I opened it up in debugger mode and select this element, it shows that its height extends almost to the top of the page instead of to the bottom of the element above it (figure).
Just to see, I took out this h2 element so that the div under it took its place. This div did not have the same problem. It had a normal height and I was able to add a top margin to it just fine.
It seems to be just the heading tag that has this problem.
I'm thinking the issue has to do with the html in some way but I have no idea why.
Here's the link to the codepen:http://codepen.io/edsonmendieta/pen/jqjRry
Help is greatly appreciated, thank you.

Answer 1

The problem is that you're following a floated element. You'll need to apply one technique or another to clear the float. See here.
The simplest option is probably to use Bootstrap's built-in clearing class:
<div class="clearfix"></div>
<h2 class="text-center" id="books">Widely Known For</h2>

Answer 2

The bootstrap class .col-lg-12 which the figure above your h2 has, has float: left;. Floated elements are not calculated into the parent element 's height.
Remove that class from the figure element - this will fix it and let you change the top margin and distance of your h2 element.
http://codepen.io/anon/pen/WwVdPO