Haag Haag - 4 months ago 7
HTML Question

It seems that my row ignores my container padding

The issue is on this page: http://haagmedia.dk/klf/holdet.php

The issue is that the grey box/row you see on the page above, is somehow ignoring my container, and I tried to figure out this issue for quite a while now, and I can't break the code.
I want the grey box to align on the sides, with the image above and the button below. I dont know if this other issue related to the same thing aswell, but when I scale down the page to mobile size, the grey box floats to the right, where it should be centered?

long question I know - here are the codes related to the box and the container.
Your help would mean a lot

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

Bootstrap styles are causing the problem.

Your elements have a padding-left: 15px and padding-right: 15px.

enter image description here

Override or remove them, and all three items align evenly in the column.


In terms of centering, just balance out your rule:

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

... add padding-right: 30px.