HTML body is not at the top of the page even with margin set to 0

Question

This is a Ruby on Rails app and I can't get the body at the top of the page. Screenshot:

I have no clue why this is happening as I've set all the properties correctly. Here is the source of the entire application. My view:

<div id="header-wrap">
  <div id="header">
    <h1>Blog</h1>
  </div>
</div>

<div id="wrapper">
  <div id="posts">
    <% @posts.each do|post| %>
    <div id="post">
      <h2><%= post.title %></h2>
      <%= simple_format post.body %>
      <small>
        <%= link_to 'Edit', edit_post_path(post) %> |
        <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
      </small>
    </div>
    <% end %>
  </div>

  <br>

  <%= link_to 'New Post', new_post_path %>
</div>

My CSS (the commented out CSS is the hack I wrote to fix the issue by changing the positioning of the header-wrap and wrapper elements):

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 *= require twitter/bootstrap
 */
 html, body, {
    background-image:url('bg.png');
    background-color:#cccccc;
    padding: 0;
    margin: 0;
}

#header-wrap {
    background-color: #424242;
/*  position: absolute;*/
    height: 100px;
    width: 100%;
  top: 0;
}

#header {
  margin: 0 auto;
    color: #FFFFFF;
    width: 588px;
}

#wrapper {
/*  position: relative;
  top: 100px;*/
    padding: 0 6px;
    margin: 0 auto;
    width: 588px;
}

#posts {
}

#notice {
  color: green;
}

.field_with_errors {
  padding: 2px;
  background-color: red;
  display: table;
}

#error_explanation {
  width: 450px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;
  h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 15px;
    font-size: 12px;
    margin: -7px;
    margin-bottom: 0px;
    background-color: #c00;
    color: #fff;
  }
  ul li {
    font-size: 12px;
    list-style: square;
  }
}

Answer 1

Please check your header tag. run your code removing <h1>Blog</h1>.

and add

h1{
     margin: 0;
  }

but keep <h1>Blog</h1>.

EDITED

make #header-wrap{ position:absolute;} this is because your #header is inside #header-wrap and remove

h1{
         margin: 0;
      }