How to make <hr> full width?

css, html

Solution

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

Problem

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). ``` .single-article .article-container-inner { background: #f0eded; border: 1px solid #c9c7c7; padding: 20px; margin-bottom: 20px; } .single-article hr { margin-top: 30px; margin-bottom: 20px; border: 0; border-top: 1px solid #c9c7c7; width:100% } ``` ``` <div class="article-container single-article"> <div class="article-container-inner"> <hr> </div> </div> ``` (also at http://jsfiddle.net/bh2f6/1/) 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.

Original source