row width is not correct

in bootstrap version 4.5:

<nav class="navbar navbar-expand-md navbar-light">
  <button class="navbar-toggler mr-auto mb-2 bg-light" data-toggle="collapse" data-target="#myNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="myNavbar">
    <div class="container-fluid border border-success">
      <div class="row border border-danger">
        <!-- sidebar -->
        <div class="col-lg-3 bg-info">
			123
        </div>
        <!-- end of sidebar -->

        <!-- top-nav -->
        <div class="col-lg-9 bg-warning">
			456
        </div>
		this row must be full width but it isn't.
        <!-- end of top-nav -->
      </div>
    </div>
  </div>
</nav>

• Operating system and version : Windows 10 17763.1217
• Browser and version: Chrome: Version 81.0.4044.138 (Official Build) (64-bit)

in Bootstrap version 4.1.1 it works fine.

[mukeshkmr776]

@HappyNewLife
Looking into this issue...

Seems issue is when class .container-fluid is being used with element nav or class .navbar
Because, if we use .row inside .container-fluid, it works fine... No issue in that

For workaround, you can wrap class .row inside another element div(with class w-100) like below:

<div class="w-100">
    <div class="row border border-danger">
        ...
    </div>
</div>

[mdo]

This broke with v4.4.0, not with v4.5.0. Testing the same markup in this CodePen, it resolves when including v4.3.1. This likely was because of the responsive containers changes we introduced where .containers in .navbar are now display: flex.