Text-selection Bug: Broken

HTML

<header>
    <h1>Broken</h1>
</header>

<div class="sizing-container outside">
    <div class="sizing-container outside">
        
        <article>
            <div class="sizing-container">
                <h1>Try selecting a large chunk of text. Notice how the selection highlighting goes to the edge of the page. How is this fixed? <a href="http://jsfiddle.net/JamesKyle/ejfsM/show">See the solution</a></h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pharetra diam ac ipsum adipiscing eu volutpat enim scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a rhoncus nisi. Donec sodales viverra orci id lobortis. Donec mauris libero, scelerisque sed faucibus nec, varius in urna. Maecenas non dolor in tortor cursus cursus a a massa. Duis consectetur enim in nisi ultricies eget aliquet sapien condimentum. Vivamus sit amet tellus eu libero convallis ultrices. Nunc vel neque sit amet nisl tempor cursus. Mauris aliquet mattis diam, eget porttitor purus aliquet eget. Vestibulum gravida condimentum sapien, eu tincidunt risus euismod nec. In dignissim, tortor ut faucibus varius, lacus dolor pharetra dolor, sit amet sodales ante nibh nec orci.</p>

                <p>Nullam facilisis leo quis magna ultrices ullamcorper. Ut ullamcorper dui nec est consectetur bibendum. Donec vitae justo ipsum, id viverra ante. Cras at sollicitudin diam. Donec ac nisl et nunc rhoncus accumsan in eget sapien. Integer lectus metus, pulvinar ut aliquet id, suscipit sit amet arcu. Sed vitae interdum quam. Donec aliquet sollicitudin laoreet. Mauris in magna vitae neque posuere aliquam at eget velit. Nullam quis velit eget sem auctor mattis.</p>

                <p>Sed auctor, ligula sed interdum lobortis, ipsum velit ultricies turpis, vel laoreet justo est vitae libero. Morbi vel nisi nisl. Nunc ante turpis, accumsan vitae sodales eget, commodo non justo. Ut tincidunt pharetra purus, eu imperdiet nisl laoreet id. Sed libero massa,...

CSS

html {-webkit-transition: font-size 0.2s ease-out;}

body {
    margin: 0;
    padding: 0;
    
    font: 1em/1.5em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    text-shadow: 0 1px 1px rgba(0,0,0,0.004);
    -webkit-font-smoothing: antialiased;
    
    background: #2b2d33;
}

div.sizing-container {
    padding: 75px;
    -webkit-transition: padding 0.2s ease-out;
    position: relative;
    
}

header {
    height: 75px;
    background: #fb0611;
    color: #fff;
    text-align: center;
}

header h1 {
    line-height: 75px;
}

article {
    background: #fff;
    color: #2b2d33;
    overflow: none;
}

footer {    
    background: #7d8088;
    color: #fff; text-shadow: rgba(0,0,0,0.1) 0 1px 1px;
}

h1 {
    font-size: 2em;
    line-height: 1.2em;
}

p {margin: 1.5em 0; position: relative;}
* > p:first-child {margin-top: 0}
* > p:last-child {margin-bottom: 0}

a:link, a:visited {color: #fb0611; text-decoration: none;}
a:link:hover {text-decoration: underline;}

@media (max-width: 1200px) {
    html {font-size: 87.5%}
    div.sizing-container {
        padding: 50px;
    }
}

@media (max-width: 800px) {
    div.sizing-container {
        padding: 25px;
    }
}

@media (max-width: 600px) {
    div.sizing-container.outside {
        padding-left: 0;
        padding-right: 0;
    }
}