似乎我的行忽略了我的容器填充

Question

问题在这个页面上：http://haagmedia.dk/klf/holdet.php

问题是您在上面页面上看到的灰色框/行不知何故忽略了我的容器，我试图解决这个问题很长一段时间，但我无法破解代码。 我希望灰色框与上面的图像和下面的按钮对齐。我不知道这个其他问题是否也与同一件事有关，但是当我将页面缩小到移动尺寸时，灰色框会向右浮动，它应该居中吗？

我知道的很长的问题 - 这是与盒子和容器相关的代码。 你的帮助意义重大

HTML

<div class="conhold container">

        <div class="row">
            <div class="hvad1 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>SERIE 4, HERRESENIOR</h4>
            </div>    
        </div>


        <div class="hold row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <img src="images/hold.png" alt="holdbillede">
            </div>
        </div>


        <div class="row">
            <div class="tekst1 col-lg-12 col-md-12 col-sm-12 col-xs-12">

            </div>
        </div>


        <div class="knap1-1 row">
            <div class="col-lg-12 col-xs-12">
                    <a href="kontakt.php" class="knaplink hvr-fade" alt="link til medlemskab">BLIV MEDLEM I KLUBBEN</a>
                </div>
        </div>


    </div>

CSS

.tekst1 {
    background-color: #A4ABB0;
    height: 200px;
}

@media(max-width: 1000px) {
    .conhold {
        padding-left: 30px;
    }
}

Answer 1

引导样式导致问题。

您的元素有 padding-left: 15px 和 padding-right: 15px。

覆盖或删除它们，所有三个项目在列中均匀对齐。

---

就居中而言，只需平衡您的规则：

@media(max-width: 1000px) {
    .conhold {
        padding-left: 30px;
    }
}

... 添加padding-right: 30px。