How to position an <hr> line 3 pixels under text - html

Question

So, in my website, I have some text at the front. I'm trying to put a <hr> 3 pixels under the text, however even when I try to dynamically position it, the <hr> still stays in the same place. Even try positioning it in this JSFiddle:
Text on top of HR line 3px
As you could probably tell, I cannot position it... and at the moment, it kind of looks ugly.
In the full website that I made, I have a <video> html tag, which is playing. It also has a top menu so that you can choose what category of my website you want to choose. Here's a screenshot:
I'm also planning to add a button directly under the <hr>, but I think I should stick to this problem first.

Answer 1

What happens in your current code is that the browser defaults are p {margin: ...some value depending on browser...;}.
So you must first add your own CSS rule to overwrite it, here: #toptext p {margin: 0;}.
Then you can freely choose how to position your <hr> using its margin-top.
Note that, as you have a big font-size for the text, it keeps some space under it, so you may have to use a negative margin for <hr>, like in the example below:
#toptext {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
}
#toptext p {
margin: 0;
}
#line {
height: .5px;
background-color: #03f;
margin-top: -15px;
}
<div id="toptext">
<p>MatthewTheBottleFlipper</p>
<hr id="line"/>
</div>

Answer 2

Hide the <hr> and try adding the line to the paragraph.
Like this:
#toptext p {
border-bottom: 1px solid red;
line-height: 66px;
}
Then adjust the line-height.

Answer 3

remove all the excess css overkill and lets keep life simple :)
HTML
<p>MatthewTheBottleFlipper</p>
CSS
p {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
border-bottom:solid 1px #000; /* u need this */
padding-bottom:3px /* ...and this */
}

Answer 4

The p tag naturally has margins and padding. Just remove it, and everything will work how you want:
#toptext {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
}
#line {
height:0.5px;
background-color:#03f;
margin-top: 3px /* I can't position this three pixels under text */
}
p { padding: 0; margin: 0; }