Edit in JSFiddle

        <title>Shows child element overlapping the parent element's container. Also shows background covering half of the parent element</title>
        <p class="lol">BLAH BLAH BLAH</p>
                <h1>Header of a section</h1>
                <p>Section paragraph. The background color is in the section, which extens out through negative margins and positive padding. The negative top margin pulls the element up, while the padding-top produces extra background.</p>
    background: #000;
    margin: 0;
    height: 100px;
    color: #fff;
    margin-top: -25px;
    font-size: 40px;
    float: left;
    color: #151;
    margin: 0;
    background: #ccc;
    padding: 20px;