When Using Grid 960, How to Still Have a 100% Width Header Section

When using grid 960, can I still have a 100% width header section?

Sure... just manually style the top part to be 100%.

960.gs with 100% width header

If I guessed this is what you want:

<div style="width: 100%; ...">
    <div class="container_12">
        your grid layout here
    </div>
</div>

Grid 960 take up entire width with resize

First of all - <div class="header" style="width:100%;"></div> is not wrapping your container.

Second: add width: 100% to your mainWrapper class instead of .header, but that i know there is hardcoded widths in 960 grid system, so your columns with .grid_4 will be still width: 300px.

Try with another Grid System with fluid layouts, e.g.: http://www.designinfluences.com/fluid960gs/

Fixing header in 960 grid based theme

Try this:

.em-header {
    background: url(../images/digital_blue/bkg-header.png) 0 0 repeat #b50728;
    position: fixed;
    width: 100%;
    display: block;
    z-index: 9999;
}

.em-main {
    top: 122px;
    position: relative;
}

That should do what you're after. I tested it in devtools and works perfectly

Collapsing floats in 960 grid

If this is what you want, then just do this:

#container {
    border:2px solid blue;
    top:0;
    width:960px;
}

Or if you want that navigation to be right at the top do this:

#container {
    border:2px solid blue;
    top:0;
    width:960px;
    margin-top:-250px;
}

the utility of 960gs and skeleton

960gs has been succeeded by Unsemantic. See: http://unsemantic.com/. The Unsemantic framework uses precentages for column widths and as percentages are relative to the container width, they are better suited to be used in reponsive grids.

Some small advice: use the grid system to specify your lay-out columns, instead of applying column widths to specific elements such as news lists, forms, images, etc. This allows the elements within the column to automatically gain their width via the column width itself.

website using 960.gs what css rule is responsible for divs filling 100% screen width

DIVs, unstyled, will always fill 100% of the parent element. If that's the body, or another element that fills the browser window, it will fill 100%.

It's called a "block level" element. All block level elements behave this way: div, p, form, ul, etc.

How to make a responsive web layout with a full width header and fixed width body

The issue is that your main-content div is set at 1000px (with 30px horizontal padding) while your CSS file specifies your header to be 960px. Increasing the width of your header to match your content will correct the problem.

Here's the code for the fix:

.grid-50-50 {
  display: table;
  width: 1030px;
}