How to adjust the width of a horizontal rule element

Issue

I've got a problem with setting the width of <hr> elements. I mean I want my <hr> to be displayed half of the full width like this image:

As you can see the <hr> element is between the <h1> tag and paragraph and it's half of screen full width.

I have searched and all I got was to setting the <hr> element like this:

<hr size="30">

But that just does not work. So do you know how to set the width of <hr> element?

Solution

Set the style attributes of the hr element in css

hr {
    width:50%;
    margin:0 auto;
}

Answered By - gavgrif