How to set the size of a <hr> element?

I want to set the size of the hr element,but it doesn’t work,is there anything wrong here?
my link is here:

Bootstrap styling is overriding your hr styling. You have to make your CSS more specific.

Something as simple as creating a new class for your hr tag should clear that up.

<style>
    hr.h-divider {
        border-top: 5px solid #eee;
    }
</style>

<hr class="h-divider">

<!-- Something like this should work. -->

I am new to Bootstrap. Would you like to tell me which element of Bootstrap is overriding the hr styling?
Thanks a lot!

There are no “elements” in Bootstrap. It is about predefined CSS classes and some JS stored in its’ libraries. That means you need to add a particular class (the name of class) from Bootstrap to your html in order to apply changes. Other way is to override common Bootstrap/browser properties of your element via inline CSS or adding custom CSS.
In your case, I would recommend the same approach as ItsRoyal suggested above but to use “border” instead of “border-top” as far as in this case there is no need to specify it. If you meant some space around or between elements - better use Bootstrap classes.

Thanks a lot!It works!

Nice to hear you make a progress! Keep it up! =)