Div полной ширины в bootstrap 4

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

Поскольку столбцы Bootstrap имеют отступы. Используйте p-0 (padding: 0), чтобы удалить его.

<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

Макет от края до края во всю ширину в Bootstrap 4

Как объяснено в документации, обнулить заполнение жидкостью контейнера (px-0) и использовать no-gutters в строке ..

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

Также контейнер-жидкость можно просто удалить при использовании .row.no-gutters.

Bootstrap 4 полной ширины

Согласно документации bootstrap 4:

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

Документы Bootstrap 4 No Gutters

Так:

    <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>

Вот мое решение:

.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>