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

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

Bootstrap样式导致问题。

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

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

就中心而言，只需平衡你的规则：

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

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