Styling the entry header

That’s a really tough one to do easily, because the header is sitting inside the main-wrapper container, which is smaller than the full width. You’d have to do a fair bit of php coding for it to sit outside of that wrapper.

An alternative CSS approach, would be to give the header absolute positioning, which will take it outside the normal document flow. This works by:
– Positioning the header block with position:absolute (at which point the content below shifts up and the heading and the text overwrite each other—this is the nature of position:absolute: its own “space” is no longer respected by the other elements);
– Shifting the content back down again by adding padding to the top;
– Making sure that the max-height of the header block is always 20px or so less than the top padding of the content (which effectively ensures a “margin” between the header and the content).

It also depends on removing superfluous elements such as the horizontal rule and brings several margins to 0 (so that you can play around with padding instead—as you did in the CSS above).

/* Remove hr */
.entry-header .featurette-divider {
    display: none;
}
/* Remove main-wrapper top-margin*/
#main-wrapper {
    margin-top: 0;
}
/* Remove heading1 top- and bottom-margins and add padding instead*/
h1.entry-title.format-icon {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 30px;
    padding-bottom: 50px;
}
/* Style the header, including absolute positioning */
.entry-header {
    background-color: #08c;
    color: white;
    left: 0;
    margin: 0;
    max-height: 100px;
    overflow: hidden;
    padding-left: 5%;
    padding-right: 5%;
    position: absolute;
    width: 90%;
}
/* Shift the content down, to make room for the header block*/
.entry-content {
    padding-top: 120px;
}

Caveats:
– Your h1 will be positioned relative to the left of the screen and will not be aligned with the text below(**);
– Because you are making the header block + padding 100% wide, you can only play with % padding, not px padding (unless you want to change the box-sizing for this element)
– I deliberately gave a larger-than-necessary bottom padding to the h1, because I then cut it off with the header block’s max-height. You may wish to refine this;
– You will need to check that this works for all media-query widths—there may be some CSS in the main Customizr stylesheet that you need to override for the different media query sizes;
– This CSS may mess up your front page and blog posts. I didn’t check. If it does, it should suffice to add .page to the selectors.

(**) You could get around this by defining its position as left:50% and then shift it back with a negative left margin that is half the width of the main wrapper (using a trick similar to this). This complicates the solution and I’m not sure you need it anyway.

Phew! An interesting solution, but I always come away from complex CSS solutions thinking that it’s crazy we’re still doing this in 2014.

Anyway: it’s a nice effect and the above works, if you can live with/manage the caveats.