Bootstrap divider displaced on smaller screens

Question

I'm currently developing a website, one of my first bootstrap websites.

Facing a problem that I've been trying to solve for a few hours now.

I'm placing a divider or separator that I made in photoshop (png image) on the edge of a section.

It looks like this on desktop size:

https://www.dropbox.com/s/qxf7dheb0k79q2b/Screenshot%202014-09-30%2023.02.50.png?dl=0

But on smaller screens this happens:

https://www.dropbox.com/s/w4je7milallfrqn/Screenshot%202014-09-30%2023.10.50.png?dl=0

I'm sure it due to my bad CSS.

Here is my html and css:

<section class="hero-section text-center">
  <img class="separator img-responsive"src="images/separator.png">
  <div class="container">
    <h1>Download Now</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
    <button class="btn btncta">Download Now</button>
    <p class="small">*Needed for developers</p>
  </div>
</section>

CSS:

.separator{
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:318px;

}

Any way I could fix this?

Is it using a image for divider outdated (probably is)?

Answer 1

There's nothing wrong with using that separator image approach , but you're doing it wrong. Just replace your CSS like this:

.separator{
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:0px;
width:100%; height:1px;
}

and your HTML like this:

<section class="hero-section text-center">

  <div class="container">
    <h1>Download Now</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
    <button class="btn btncta">Download Now</button>
    <p class="small">*Needed for developers</p>
  </div>
  <img class="separator "src="images/separator.png">
</section>

I did a bootply so you can see (the background color is not needed, is just so you see the effect since I don't have your image)

Adding new method based in new information:

/* CSS used here will be applied after bootstrap.css */
 body {
    background:#f00;
}
.separator {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top:0px;
    background:#f00;
    width:100%;
    height:1px;
}
.hero-section {
    background:#fff url('http://www.customstairsandmouldings.com/images/circle.jpg') no-repeat center bottom; / we center the background and position it at the bottom of the div */
    padding-bottom: 100px; /* padding-bottom has to be enough to give room to the image in the background, so if image height is 80px, padding bottom should be at least 80px, or better 100px to add spacing */
}

See new Bootply here