How to increase width of Bootstrap container on Max width?

Question

I've placed a DataTable within a Bootstrap div of type container. When I run the website on the browser's max width the container for the table adds a scrollbar and cuts off the last column in the table.

I did try using a container-fluid div type as suggested here but this decreases the width of the tables's container even further.

On inspecting the element it seems that surrounding container body-content inherited form the layout page is adding a margin on the left and right side of the table container:

One possible solution I'm thinking if to decrease the margin of the inherited container body-content on max width, but I'm not sure how to do that via CSS.

From the screenshot below you can see that the Delete col is being cut off although there is plenty of whitespace wither side of the table to expand:

Question:

How can you increase width of a Bootstrap container on Max width?

Gist of table container markup:

<div class="container">


    <div class="form-group">
        <div class="table-responsive">
            <div class="table-responsive" id="datatable-wrapper">

                <table id="escalation" class="table table-striped table-bordered" cellspacing="0">
                    <thead>
                        <tr>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">ID</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Application</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">UID</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Type</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Status</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Statement</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Created</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Updated</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Last Update</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Next Update</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Root Cause</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Details</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (HP.ESCALATION.Web.Models.Escalation item in Model)
                        {

                            <tr>
                                <td>@item.ID</td>
                                <td>@item.Application</td>
                                <td class="td-limit">@item.EM</td>
                                <td class="td-limit">@item.Event</td>
                                <td class="td-limit">@item.status</td>
                                <td class="td-limit">@item.Statement</td>
                                <td class="td-limit">@item.Created</td>
                                <td class="td-limit">@item.Updated</td>
                                <td data-order="@item.UnixTimeStamp" class="td-limit">@item.UpdatedTime</td>
                                <td class="td-limit">@item.NextUpdate</td>
                                <td class="td-limit">@item.RootCause</td>
                                @* Add CRUD buttons to each table row --> *@
                                <td><button type="submit" style="background-color: #0CA281;" class="btn btn-success details">Details</button></td>
                                <td><button type="submit" class="btn btn-danger delete">Delete</button></td>
                            </tr>

                        }


                    </tbody>
                </table>




            </div>
        </div>
    </div>
</div>

Gist of Layout container:

<div class="container body-content" style="margin-top: 90px; margin-bottom: 70px;">

                @* Main Content Render *@
                <div id="content">
                    <div class="content-wrapper main-content clear-fix">

                    </div>
                    @RenderSection("featured", required: false)
                    <section class="content-wrapper main-content clear-fix">
                        @RenderBody()
                    </section>
                </div>


            </div>  

Answer 1

None of the answers above are good solutions. You can easily change bootstrap's variables by creating a new _project_variables.scss and import it before bootstrap in your main scss file. For example:

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1280px
) !default;