<hr> with display block is adding scroll bars if I dynamically change the margin
<p>I have created a hr tag with below style  </p>

<pre><code>  hr{   
     /* margin:5%; */
     height:10px;
     display:block;
  }​  
</code></pre>

<p><a href="http://jsfiddle.net/thKb8/4/" rel="nofollow">here</a> is the fiddle
It is displayed properly. Occupying 100% width of the screen. But if I change the margin Dynamically through JavaScript Console. It is overflowing from screen. How can I make this auto adjustable based on margins.</p>
