user3187469 user3187469 - 6 months ago 13
HTML Question

How to make <hr> full width?

http://jsfiddle.net/bh2f6/1/

I want to make this

<hr/>
so it will stretch the full width, right to the edges of its parent container. I have tried adding margin-left/padding-right to overcome this but it keeps changing when resizing (responsive).

Is there a better solution for this?

Edit: I can't edit the parent container's padding as that is needed for bunch of other elements.

Answer

Your width:100%; on the <hr /> and the padding on the parent were messing things up. The <hr /> naturally stretches across the screen and doesn't need width:100%, so remove it. Then to compensate for the padding, just add the same negative margin to the <hr />.

Change your CSS to this:

.single-article hr {
    margin: 30px -20px 20px;
    border: 0;
    border-top: 1px solid #c9c7c7;
}

See working jsFiddle demo