Problem with <hr> line break

I admit, this is probably a novice problem, but it's driving me absolutely batty that I can't troubleshoot it and hoping another set of eyes can see something I'm not.

I'm using an html horizontal rule line to break up a page in wordpress. <hr/>

The line works fine in Chrome, Safari and IE but in Firefox, it shifts the line off outside the site container from the looks of it.

When I inspect the element with firebug, I can't see anything that would be forcing it to do this.

Here's a sample page it would be on: http://www.modernimpact.com/about-us/

 

Because other surrounding elements are floats?
Perhaps adding clear:both style to that <hr> element may mend it or just make the <hr> a float too.... am not sure how the design should be like

 

Well, you're using the <hr> wrong, but hey... a clear: both; will fix the problem. However, since you're using the <hr> to split the content right before a <h2>, why don't you just add the border, clear and a little padding on the h2 itself?
Something like:

h2 {
  border-top: 1px solid #b0b0b0;
  clear: both;
  padding-top: 1em;
}

Code (markup):

And remove the <hr> alltogether? The <hr> is meant to split content when a heading is not appropriate - the horisontal line is just how most browser manufacturerers decided to show a <hr> - hr does NOT mean "put a horisontal line here".

 

That's my take on it too. As I often say, "If you are choosing ANY HTML tag because of it's default appearance, you're using the wrong tag for all the wrong reasons."... In this case the HR would be redundant to the H2, and styling said H2's would be far more appropriate.

THOUGH it's turdpress, so automatically the semantics are gibberish -- but this is gibberish compared to normal TP markup... multiple H1, H2 preceding H1, H6 with no H4, H4 or H2 for them to be subsections of -- it reeks of a complete and utter ignorance of what numbered headings are and how to use them before we even talk the attributes like ALIGN, SIZE and WIDTH that have NO business on any website written after 1997, static style in the markup, and the "endless pointless" DIV and classes typical of turdpress. Much less the mouth-breathing idiocy of sending style to "all" or the endless horde of scripttardery for nothing, multiple files slowing down the page load, multiple redundant opengraph values, opengraph values not one legitimate UA gives a flying purple fish about and/or are redundant to other META, absolute URI's for no reason other than wasting bandwiddth, etc, etc...

Basically if you don't know what's wrong with this:

<hr />
<div class="one-half first"><a href="http://www.modernimpact.com/wp-content/uploads/2015/07/ExperienceMI_Graphic1.png"><img class="alignnone wp-image-268 size-full" src="http://www.modernimpact.com/wp-content/uploads/2015/07/ExperienceMI_Graphic1.png" alt="" width="500" height="500" /></a></div>
<div class="one-half">
<h2 align="left">USE OUR EXPERIENCE</h2>
<h1 align="left">ModernImpact houses some of <span class="marker">the world&#8217;s best marketing talent</span>.</h1>
<p align="left">

Code (markup):

or even worse this:

<hr size="8" width="100%" />
<h2 style="text-align: center;">WHAT WE CAN DO</h2>
<h1 style="text-align: center;">We help clients succeed with<br />
<span class="marker">Intelligent, custom solutions.</span></h1>
<div class="one-half first">
<p><a href="http://www.modernimpact.com/wp-content/uploads/2015/06/ExperienceMI_Icons-01.png"><img class="alignnone wp-image-303 size-thumbnail" src="http://www.modernimpact.com/wp-content/uploads/2015/06/ExperienceMI_Icons-01-150x150.png" alt="" width="150" height="150" /></a></p>
<h6>Strategic/Analytical</h6>

Code (markup):

It's time to go back and learn some more about HTML and the professional writing document structure upon which it is supposed to be based. HR before headings is a pointless redundancy. H2 immediately before a H1 is gibberish, what the blue blazes makes those images grammatical paragraphs? How can you have a H6 when there's no H5, H4, H3 or H2 between it and the H1? Why are you using "align" like it's still 1997? Why are you using rubbish PRESENTATIONAL classes like "one-half" that probably won't even be one-half if you made the layout responsive? Those images don't even look like content... they're presentational, why are they even in the markup in the first place?!?