One way of achieving this could be to add a new HTML element inside the #support
and give it a 100% right padding and 100% negative right margin. Like this:
<div class="one-third column" id="support">
<div class="inner">
...
</div>
</div>
#support .inner {
padding-right: 100%;
margin-right: -100%;
background-color: #000;
}
Then add a 'page' container with overflow hidden to make sure you don't get a scrollbar.
<div id="page">
<div class="container">
...
</div>
</div>
#page {
overflow: hidden;
}
In the first step, the reason I added a new <div>
rather than styling the existing #support
is that I think it's best to leave <div>
s that have grid structure styles alone. We don't want to affect their margins.