'Why is my 2nd div have different size from the other? They all have the same container-fluid class

In the HTML snippet below, I'm using Bootstrap and all three child divs have the same container-fluid class but why is the 2nd div different from other?

This is the example Div Example. Both div1 and div4 are the same and div2 and div3 are also the same width but 1,4 and 2,3 has different div width although they are container fluid with 100%.

<div class="container-fluid">
    <div class="container-fluid" id="div1" style="border:5px red solid;">
        <p>This is a div filler</p>
        <table class="table-responsive nowrap bg-white rounded shadow-sm table-hover">
            <asp:GridView class="table table-striped table-hover dt-responsive" width="100%" ID="GridView1" runat="server"></asp:GridView>
        </table>
    </div>
    <div class="container-fluid" id="div2" style="border:5px red solid;">
        <p>This is the second Div</p>
        <table class="table-responsive nowrap bg-white rounded shadow-sm table-hover">
            <asp:GridView class="table table-striped table-hover dt-responsive" width="100%" ID="GridView2" runat="server"></asp:GridView>
        </table>
    </div>
    <div class="container-fluid" id="div3" style="border:5px red solid;">
        <p>This is the third Div</p>
        <table class="table-responsive nowrap bg-white rounded shadow-sm table-hover">
            <asp:GridView class="table table-striped table-hover dt-responsive" width="100%" ID="GridView3" runat="server"></asp:GridView>
        </table>
    </div>
</div>
htmlcss


Solution 1:[1]

 <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div id="div1">
                <p>This is a div filler</p>
                <table class="table table-bordered table-responsive nowrap bg-white rounded shadow-sm table-hover">
                    <asp:GridView class="table table-striped table-hover dt-responsive" width="100%" ID="GridView1" runat="server"></asp:GridView>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div id="div2">
                <p>This is the second Div</p>
                <table class="table table-bordered table-responsive nowrap bg-white rounded shadow-sm table-hover">
                    <asp:GridView class="table table-striped table-hover dt-responsive" width="100%" ID="GridView2" runat="server"></asp:GridView>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div id="div3">
                <p>This is the third Div</p>
                <table class="table table-bordered table-responsive nowrap bg-white rounded shadow-sm table-hover">
                    <asp:GridView class="table table-striped table-hover dt-responsive" width="100%" ID="GridView3" runat="server"></asp:GridView>
                </table>
            </div>
        </div>
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions