I kinda forgot, the
"row" class naturally creates a limited width (
max-width: 71.25rem) to the container where it is applied. This is just how it works, based on the
foundation grid. You can easily overcome it by simply omitting the "row" class, for example:
<div>
<div class="small-6 columns" style="background-color:green">1</div>
<div class="small-6 columns" style="background-color:red">2</div>
</div>
Alternatively, you reset the "max-width" style specifically for the row:
<div class="row" style="max-width: none;">
<div class="small-6 columns" style="background-color:green">1</div>
<div class="small-6 columns" style="background-color:red">2</div>
</div>