full width div in bootstrap 4

"why my border bottom in inside div is not full width?"

Because Bootstrap columns have padding. Use p-0 (padding:0) to remove it.

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-2 bg-light mh-100 p-0">
            <div class="d-flex justify-content-center border-bottom w-100">
                <img class="my-3" src="img/avayadak.png" alt="" srcset="" style="height:18px; width:110px;">
            </div>
        </div>
        <div class="col-12 col-md-10 bg-dark mh-100">
            <p>sfsdfsdfsd</p>
        </div>
    </div>
</div>

https://www.codeply.com/go/SVpElPIXAw

Full width edge-to-edge layout in Bootstrap 4

As explained in the docs, zero out container-fluid padding (px-0), and use no-gutters on the row..

<div class="container-fluid px-0">
    <div class="row no-gutters">
        <div class="col-12">
            (edge-to-edge content)
        </div>
    </div>
</div>

Also the container-fluid can be simply removed when using .row.no-gutters.

Bootstrap 4 Full Width

According to bootstrap 4 documentation:

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

Bootstrap 4 No Gutters docs

So:

    <div class="row no-gutters">
        <div class="col-12 col-md-2 bg-light mh-100">
            <div class="d-flex justify-content-center border-bottom w-100">
                <img class="my-3" src="img/img.png" alt="" srcset="" style="height:18px; width:110px;">
            </div>
        </div>
        <div class="col-12 col-md-10 bg-dark mh-100">
            <p>sfsdfsdfsd</p>
        </div>
    </div>

Here is my solution :

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

<div class="container">
  <div class="full-width">
  </div>
</div>