Html 水平尺保持位置的随机移动

我有两条横向规则和一些文本。一行在某些文本顶部，另一行在文本下方

下面的那个一直在动，我不知道为什么。有时，当我刷新页面时，它位于正确的位置，有时则不在正确的位置。我也试着在手机上浏览，同样的问题

我只希望这两条线与中间的文本对称，就这样。

这是我的密码：

 <div class="blogpost3">
        <p class="posttitle"><span class="c1">NEW MUSIC VIDEO:<br />
        "IT'S SIMPLE"</span></p>

        <p class="postheader"><span class="c1">Release Date:</span> 1 September
        2013</p>

        <p class="postpicture"><img alt="" src=
        "images/itssimple.jpg" /></p><br />


        <hr id="hr3" />

        <p class="posttext2"><em>&nbsp;Suit and tie. Gin and tonic. Richi
        Rich.</em><br />
        <br />
        &nbsp;It's Simple.<br />
        <br />
        <a class="roll" href="music.html"><span data-title=
        "Watch the video here"><strong>Watch the video
        here.</strong></span></a></p>

        <hr id="hr3" />
    </div>

新音乐视频：

“很简单”

发布日期：9月1日
2013年






这很简单。

jsfiddle：

谢谢