Every time I add "border:0" on my hr element, many of my hr elements stop displaying completely

Basically I'm using a series of hr elements to section off my web page. This is what my CSS looks like below:

hr{
    content: " ";
    display: block;
    height: .1px;
    width: 95%;
    margin:15px;
    background-color: #dfdfdf;
    border:0;
}

The weird thing is that every time I add 'border' it causes over a half of my elements to stop displaying on the page completely. What could the issue be here? How should I fix this?

P.S. the same thing happens if I use "border-width:0px" as well.