title: My HR style doesn't work like expected
body: <p>JSFIDDLE: <a href="http://jsfiddle.net/V7wUv/2/" rel="nofollow">http://jsfiddle.net/V7wUv/2/</a></p>
  
  <p>This is my HR style:</p>
  
  <pre><code>.page-content hr {
      background-color: #DCDCDC;
      border: 0 none;
      clear: both;
      display: block;
      float: left; &lt;-- take a close look at this
      height: 1px;
      margin: 50px auto; &lt;-- take a close look at this
      max-width: 1120px;
      width: 100%;
  }
  </code></pre>
  
  <p>When I add <code>float:left;</code> I end up having <code>margin-top: 50px;</code> and <code>margin-bottom: 50px;</code> work correctly but not <code>margin-left: auto;</code> and <code>margin-right: auto;</code> (it just floats to the left all the time).</p>
  
  <p>When I remove <code>float:left;</code> left and right margins work (it's properly centered) BUT <code>margin-top: 50px;</code> overlaps element above it and there is <code>0px</code> of margin.</p>
  
  <p>Element above has this style if you need it:</p>
  
  <pre><code>.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
      display: inline;
      float: left;
      margin-left: 1%;
      margin-right: 1%;
      position: relative;
      width: 98%;
  }
  </code></pre>
  
  <p>I want my HR to be centered and with 50px top and bottom margin.</p>