Bootstrap Row CSS issues with IE compatibility - html

Question

The site is bestofhemingway.com, and I am obviously just getting my feet wet with this whole thing. The site looks okay on Chrome, but the row is not lining up correctly in Explorer. I have been researching and fiddling and it looks to be a problem with .container or .row or the column class in bootstrap.css.
.row {
margin-right: -15px;
margin-left: -15px;
}
That's all in the .row class. One row in the wordpress page looks like this:
<div class="row">
<div class="col-md-4"><h2 class="box-title">The Sun Also Rises
<div class="col-md-8"> </div></div></div>
<div class="row">
<div class="col-md-4"><h2 class="box-title"><a href="link" ></a></div>
<div class="col-md-8"><h7 class="box-lang">Text</div></div>
Why .row is not working in IE?

Answer 1

Properly indented, your code is:
<div class="row">
<div class="col-md-4">
<h2 class="box-title">
The Sun Also Rises
<div class="col-md-8"> </div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2 class="box-title">
<a href="link" ></a>
</div>
<div class="col-md-8">
<h7 class="box-lang">Text
</div>
</div>
This reveals several issues.
Your first col-md-8 is within your first col-md-4 rather than being a sibling element.
You're using the non-existent h7 tag.
You're not closing your h tags, leaving the browser to do its own interpretation.