How to make element break out of grid and touch edge of browser
<p>Please refer to the image below. I have a grid set up (using Bourbon Neat). The first pink element fits normally over 5 columns, but the green element needs to start on the 6th column but ends breaking out of the grid and touching the edge of the browser. I'm fairly sure that this isn't possible without using javascript, but hopefully I can be proved wrong!</p>

<p>Any ideas how to accomplish this?</p>

<p>EDIT: This needs to work with max-width on the outer-container!</p>

<p><a href="https://i.stack.imgur.com/z2ihe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z2ihe.jpg" alt="enter image description here"></a></p>

<p>Example HTML:</p>

<pre><code>&lt;div class="container"&gt;
 &lt;div class="pink"&gt;&lt;/div&gt;
 &lt;div class="green"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Bourbon:</p>

<pre><code>.container{
  @include outer-container();
}
.pink{
  @include span-columns(5);
}
.green{
  @include span-columns(7);
  // What to do here???
}
</code></pre>