Question

When you view the page with a wide browser window, it looks fine. If you resize the window to make it skinny, the header suddenly drops by 60px, which is equal to the body’s padding-top. To make this page I started with a simple Bootstrap template and stripped out most of the content. Why is this happening?

Answer 1

It turns out the problem was that the custom body css needs to come before the bootstrap.css file:

<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
    }
</style>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">