You need to customize the view used by the grid system. These views can be found in \Views\Partials\Grid\ By default the grid system uses the bootstrap3 one, but you can tell the grid system to use bootstrap2 or any other view.

@Html.GetGridHtml(Model.Content, "NAME_OF_VIEW")

Here i have removed the most obvious things i can see that might help you design back on track(i have not tested it).

@inherits UmbracoViewPage<dynamic>
@using Umbraco.Web.Templates
@using Newtonsoft.Json.Linq

@* 
    Razor helpers located at the bottom of this file
*@

@if (Model != null && Model.sections != null)
{
    var oneColumn = ((System.Collections.ICollection)Model.sections).Count == 1;

        @if (oneColumn)
        {
            foreach (var section in Model.sections) {
                    @foreach (var row in section.rows) {
                        @renderRow(row, true);
                    }
            }   
        }else { 
            <div class="container">
                <div class="row">
                    @foreach (var s in Model.sections) {
                            <div class="[email protected]">
                                @foreach (var row in s.rows) {
                                    @renderRow(row, false);
                                }
                        </div>
                    }
                </div>
            </div>   
        }
}

@helper renderRow(dynamic row, bool singleColumn){
    <div @RenderElementAttributes(row)>
        @Umbraco.If(singleColumn, "<div class=\"container\">")
        <div class="row">
            @foreach ( var area in row.areas ) {
            <div class="[email protected]">
                <div @RenderElementAttributes(area)>
                    @foreach (var control in area.controls) {
                        if (control !=null && control.editor != null && control.editor.view != null ) {
                            <text>@Html.Partial("grid/editors/base", (object)control)</text>
                        }
                    }
                </div>
            </div>}
        </div>
        @Umbraco.If(singleColumn, "</div>")
    </div>
}

@functions {
    public static MvcHtmlString RenderElementAttributes(dynamic contentItem)
    {
        var attrs = new List<string>();
        JObject cfg = contentItem.config;

        if(cfg != null)
            foreach (JProperty property in cfg.Properties()) {
                attrs.Add(property.Name + "='" + property.Value.ToString() + "'");
            }

        JObject style = contentItem.styles;

        if (style != null) { 
        var cssVals = new List<string>();
        foreach (JProperty property in style.Properties())
            cssVals.Add(property.Name + ":" + property.Value.ToString() + ";");

        if (cssVals.Any())
            attrs.Add("style='" + string.Join(" ", cssVals) + "'");
        }

        return new MvcHtmlString(string.Join(" ", attrs));
    }
}

It's hard to tell but potentially this is a styling issue rather than grid specific.

In bootstrap .container restricts the width of the div so it's never wider than a maximum number of pixels.

.container-fluid removes the restriction and makes the div 100%.

However I think in your original post, the problem looks like that background color is being applied within or on the .container level, where is should be applied sooner, perhaps on the .row or anything above it.

I'm not sure what's happening in your second post - but it also looks non-grid related.

If the site is available publicly - that might help, but I'm assuming it's not.

Thanks Martin, I used what you sent and found a solution for my problem, much appreciated!

Hi Harry,

I have the same issue which you had faces, could you please send me the file where I need to update for full width grid layout.

is working on a reply...