CSS Layout Disparity (using Twitter Bootstrap on Octopress)

Question

Background: I'm currently bringing my Tumblr blog, with a (lightly) customised Bootstrap theme, over to Octopress.

Tumblr site: http://eatsleeprepeat.net/ Octopress site (WIP): http://stark-autumn-3851.herokuapp.com/ Github: https://github.com/elithrar/octopress/tree/master/.themes/eatsleeprepeat (see sass/ for the stylesheets)

The biggest problem right now is the way the hero-unit that contains the individual posts is not conforming (from what I can see) to the @media statements in the _bootstrap_responsive.css file, which is loaded at the bottom of screen.css on the site itself (via Octopress).

The HTML structure is identical (as far as the hero-unit div is concerned), and Web Inspector in Chrome isn't telling me anything useful (read: that I can understand).

If there's someone with some good CSS-fu and a few minutes to spare, I'd very much appreciate it.

Update: I've resolved the issue with the hero-unit (horizontally), so it now respects the page size. It was due to a really obvious error: "id" instead of "class" for container.

However, saying that: I still have an issue with the vertical alignment of the hero-unit underneath the navbar navbar-fixed-top div; there's no spacing between them.

Answer 1

I've fixed this by adding the following:

  <style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
</style>

Answer 2

You may need to add these CSS rules:

.container::before, .container::after {
    display: table;
    content: "";
}
.container::after {
    clear: both;
}
.container::before, .container::after {
    display: table;
    content: "";
}