HR tag for horizontal line is not working

Question

I can't figure out why my <hr> styling is not working. Basically I want just a horizontal black line separating my elements.

Here is my website

CSS

/* Horizontal Line */
.line_break {
    width:1000px;
    height: 5px;
    float: left;
    color: black;
    padding-top: 3px;
    background-color: rgba(255,255,255,.5);
}

HTML

<!---Navigation Menu ______________________________________________-->

    <div id="main_menu" class="wrapper_nav_box">
            <div class="nav_box">
                <a href="writing.html">WRITING</a> 
            </div>
            <div class="nav_box">
                <a href="http://tumblr.com">BLOG</a>
            </div>
            <div class="nav_box">
                <a href="contact.html">CONTACT</a>
            </div>
    </div>

    <hr class="line_break">

If you zoom in, you'll see that there's a weird border on the left hand side. I've tried messing around with height, but it never changes.

Answer 1

You can do it with some edits to your current CSS.

CSS:

.line_break {
    //width:1000px;
    //height: 5px;
    //float: left;
    //color: black;
    //padding-top: 3px;
    //background-color: rgba(255,255,255,.5);
    border: none;  // remove default style
    border-bottom: 3px solid black;  //apply style
}

Example: http://jsfiddle.net/PPYqx/