hr not displaying within this container block...

[r_tist]

Need some help trying to sort out why the hr is not falling into the row of the container. It just won't display.

My guess is something with the display or positioning needs to be adjusted?

hr {

        color: #cccccc;

        display: inline-block;

        position: absolute;

        }

.header {

    background-image:url('images/header-bg.png');

    border-bottom:#ccc 3px solid;

    height:174px;

    margin: 0 auto;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 99999;

    width: 100%;

}

<div class="col-xs-12">

        <div class="header"><!--structural container overall-->

                <div class="container"><div class="row">

                    <div class="Mlogo"><!--includes top/bottom padding for logo-->

                    <a target="_blank" href="#"><img src="images/logo.png" class="img-responsive" alt="logo"></a>

                     </div>

                    <hr>

                   <div class="nav col-md-9">

                   <ul class="nav"><li class="nav"><a target="_blank" href="#">Link</a></li></ul>

                  </div>  

         </div></div></div></div></div>

Can you advise how I can clean this up? Thank you!

[pziecina · Accepted solution]

You will probably find it is being displayed at the very top of your page.

Giving it a position of absolute takes it out of the normal content flow. As you have already quoted from the css specs in another discussion, look at the specs for the use of position absolute, and pay particular attention to the default values.

edit -the above depends on that being your entire page structure, please always try to post a link to the complete page, as 'snippets' will often lead to an incorrect or out of context answer.

[Nancy OShea]

Count your <div> and </div> tags.  They don't match.

Nancy