Bootstrap Col无法填充100宽度

Question

当屏幕尺寸低于1024 px时，我正在尝试使我的字体填充100％的宽度，但是由于某种原因，我无法使其填充到右侧的100％。我这里有一张我现在得到的结果的图片：

如您所见，它通过添加margin-left: -30px一直到左侧，但是当我尝试同样地操作时，只要正确，它就不会起作用。

这是我的代码：

@media screen and (max-width: 1024px) {
.Menu100Width {
    margin-left: -30px;
    margin-right: -60px;
    width: 100%;
}

这是我的div：

<div class="row col-lg-5 col-md-12 Menu100Width">
                <div id="MenuKort">
                    <div class="text-center">
                        <hr style="float: none; margin-bottom: 25px; width: 100%;" />
                        <h1 id="cocktailsOverskrift">Cocktails</h1>
                    </div>
                    <div id="MenuKortIndhold">
                        <h3>Mojito</h3>
                        <hr style="margin-top: 7px;" /><br />
                        <span class="DrinkTekst">
                            Angostura Reserva Rom & Bitters - Danskvand - Frisk Lime & Mynte- Rørsukker - Knust is
                        </span>
                    </div>
                </div>
            </div>