title: Bootstrap positions <hr> line in an odd way
body: <p>Fiddle here: <a href="https://jsfiddle.net/mv5ut6sw/" rel="nofollow noreferrer">https://jsfiddle.net/mv5ut6sw/</a></p>
  
  <p>I have a list of links at the top of my webpage contained in a <code>&lt;div&gt;</code>.  I would like a horizontal <code>&lt;hr&gt;</code> line above and below this <code>&lt;div&gt;</code> to visually separate the links from the rest of the page.  Simplified example:</p>
  
  <pre><code>&lt;hr&gt;
  &lt;div style="float:left; width:100%"&gt;
      &lt;div style="float:left; margin-right:20px"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="/link1"&gt;Link1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/link2"&gt;Link2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div style="float:left; margin-right:20px"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="/link3"&gt;Link3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/link4"&gt;Link4&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  </code></pre>
  
  <p>I am using bootstrap to pretty the page up.  Without bootstrap, the <code>&lt;hr&gt;</code>s behave as expected, appearing above and below the link section.  When I use bootstrap, however, the two horizontal lines both appear above the link section.  </p>
  
  <p>I am at a loss.  I don't want to edit bootstrap code.  Is there inline css I can include to fix this weird placement?</p>