Bootstrap 4 dropdown ul list not correct and fixed position

Question

Problem is bootstrap dropdown select list appear away from button. The position is not correct and not fixed with button. See the image down to understand issue. Can anyone help me?

Here is my code:

<div class="button-group dropdown">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Velg lokaler 
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu px-2" data-bind="foreach: bookable">
                <li>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" checked="checked" data-bind="text: name"/>
                        <label class="form-check-label" data-bind="text: name">

                        </label>
                    </div>
                </li>
            </ul>

        </div>