Twentyfourteen white space

Try this:

.content-area {
    position: relative;
}

.content-area:after {
    background: red;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 398px;
}

Hello, it is perfect in full screen, but not good in responsive : the red overwrite the left column

Yes are you familiar with Media Queries? You can change the positioning and width – the styles causing the issue – on smaller devices.

Hello, familiar is not my best definition ! I use them. But anyway, when I prospect this new code, I have although in responsive some title too big (going in the side), and in the right of the content a line blue;
Do you think I should keep this code, and going to correct each problem in Media Queries ?
Thanks for your help, I fell less desesperate !

Try this code instead:

@media screen and (min-width: 1008px) {
    .content-area {
        position: relative;
    }

    .content-area:after {
        background: red;
        content: '';
        display: block;
        height: 100%;
        padding-left: 20px;
        position: absolute;
        right: 0;
        top: 0;
        width: 30%;
    }
}

Wahouh ! Perfect ! Thanks, my week-end sounds better !