CODEWITHSUNDEEP
twitter-bootstrap
user4419336
user4419336

Reputation:

Remove padding or margin

I have a bootstrap container but for some reason the bottom of the container there is a gap.

The right side column does not go all way to bottom.

Question how can I make the right side column background go all the way to bottom or remove what ever the gap is at the bottom of container div?

CodePen Preview

CSS

body {
    padding-top: 64px;
    background: #F0F0F0;
}

.gap-md {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.gap-sm {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#body-image {
    background: url(../../../images/blue-print-2.jpg);
    min-height: 380px;
}

.container {
    background-color: #fff;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    margin-top: -10rem;
    padding: 0;
}


.profile-stats {
    padding: 2rem;
    background: #F7F7F7;
    height: 100%;
}

Upvotes: 0

Views: 110

Answers (1)

Steve K
Steve K

Reputation: 9045

Your h2 has a margin on it and along with your matchheight script is creating extra at the bottom of your profile information section because you are allowing the overflow on the box area so the margin for the h2 is hitting the containing div instead of the .box div you can add overflow:hidden to your .box or just remove the margin from your h2 and add padding to it instead or something like the following:

either

.box{
  overflow:hidden;
}

or

h2{
  margin:0;
  padding:15px 0;
}

Upvotes: 1

Related Questions