Have background of div extend to sides of the page

My website's basic structure is provided by a .page-container class, attributed to the main container elements. The class sets width, max-width and margin: auto; properties so as to have all the content tidy, centred and aligned.

Inside the .page-container elements, further subdivisions are made, as you can see from this Fiddle and the image below.

I would like to add a background to the text part – the <article> with the .content class in the Fiddle –, that extends to the upper, lower and right part of the screen.

I would like to do this maintaining the current architecture as much as possible and without adding unmeaningful elements, obtaining something like the image below. Is it possible? Shall I rethink my architecture? Was my design pattern good in the first place?