Padding and Margin not working

Question

Theres a problem I have throughout my site and I'm unsure how to solve it. When I try to add padding or margins to certain elements they just don't work.

Here is a jsfiddle of part of the site that isn't responding to the css.

https://jsfiddle.net/a90sns1c/

I am trying to add padding to the top of .banner-sub but the padding just overlaps the above elements not pushing it down.

css:

#banner-wrap{
    text-align: center;
}
.banner-title{
    padding-top: 75px;
    padding-bottom: 40px;
    color:#fff;
    font-size: 42px!important;
}
.banner-icons{
    width: 780px;
    margin: 0 auto!important;
    padding-bottom: 50px!important;
}
#banner-button{padding-bottom: 50px;
}
#banner-content{
    background-image:url('../images/banner.png');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}
.banner-sub{
font-size: 24px!important;
    font-family: 'Hind', sans-serif!important;
    font-weight: 400;
    }

#anchor-icon{padding-bottom: 30px;}

html:

<div id="banner-wrap">
    <div id="banner" class="container">

     <!--  <div class="banner-bg-img">
            <img src="images/banner.png" />
        </div>-->

        <div id="banner-content">
            <h1 class="banner-title">Quality assurance through planning<br /><span class="banner-sub">Nationwide leaflet distribution and sample delivery</span></h1>

            <div class="section group banner-icons">
                <div class="col span_1_of_4">
                    <img src="images/icon1.png" />
                </div>
                <div class="col span_1_of_4">
                    <img src="images/icon2.png" />
                </div>
                <div class="col span_1_of_4">
                    <img src="images/icon3.png" />
                </div>
                <div class="col span_1_of_4">
                    <img src="images/icon4.png" />
                </div>
            </div>

           <div id="banner-button"> <a href="#" class="ghost-button">WHY CHOOSE US</a></div>
            <div id="anchor-icon"><a href="#"><img src="images/down-icon.png" /></a></div>

        </div>

    </div>
</div>

Answer 1

You are applying class .banner-sub on span which is an inline element , as your class .banner-sub does not have any display property set in it , by default display:inline will be set on span as its an inline element.width padding margin wont apply on inline elements (if you are wondering why please see this What is inline , block and Inline-block in css.)

Now for your problem what you can do. i would suggest couple of changes instead of quick-fix (using inline-block) on span. As i see in you above code you have used h1 tag (default font-size:24px;) but you override it with font-size 42px in your css. so you dont really need h1 here ,instead of using h1 tag use a div and put another div inside instead of span that should be the proper way considering your scenario. posting your code with all the suggested changes.

#banner-wrap {
  text-align: center;
}
.banner-title {
  padding-top: 75px;
  padding-bottom: 40px;
  color: #ccc;
  font-size: 42px!important;
}
.banner-icons {
  width: 780px;
  margin: 0 auto!important;
  padding-bottom: 50px!important;
}
#banner-button {
  padding-bottom: 50px;
}
#banner-content {
  background-image: url('../images/banner.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.banner-sub {
  font-size: 24px!important;
  font-family: 'Hind', sans-serif!important;
  font-weight: 400;
  padding-top: 200px;
}
#anchor-icon {
  padding-bottom: 30px;
}

<div id="banner-wrap">
  <div id="banner" class="container">

    <!--  <div class="banner-bg-img">
            <img src="images/banner.png" />
        </div>-->

    <div id="banner-content">
      <div class="banner-title">Quality assurance through planning
        <div class="banner-sub">Nationwide leaflet distribution and sample delivery</div>
      </div>


      <div class="section group banner-icons">
        <div class="col span_1_of_4">
          <img src="images/icon1.png" />
        </div>
        <div class="col span_1_of_4">
          <img src="images/icon2.png" />
        </div>
        <div class="col span_1_of_4">
          <img src="images/icon3.png" />
        </div>
        <div class="col span_1_of_4">
          <img src="images/icon4.png" />
        </div>
      </div>

      <div id="banner-button"> <a href="#" class="ghost-button">WHY CHOOSE US</a>
      </div>
      <div id="anchor-icon">
        <a href="#">
          <img src="images/down-icon.png" />
        </a>
      </div>

    </div>

  </div>
</div>

Answer 2

Set display:block; or dispaly:inline-block. <span>is a inline element.

CSS

.banner-sub{
    display:block;
    font-size: 24px!important;
    font-family: 'Hind', sans-serif!important;
    font-weight: 400;
    padding-top:200px;
    }

DEMO HERE

Answer 3

Span element has display:inline by default so padding does not effect it. You have to give display:inline-block or display: block the element(.banner-sub).

Answer 4

#banner-wrap{
    text-align: center;

}
.banner-title{
    position:absolute;
    padding-top: 75px;
    padding-bottom: 40px;
    color:#ccc;
    font-size: 42px!important;
}
.banner-icons{
    position:absolute;
    width: 780px;
    margin: 0 auto!important;
    padding-bottom: 50px!important;
}
#banner-button{padding-bottom: 50px;

}
#banner-content{
    background-image:url('../images/banner.png');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;

}
.banner-sub{
font-size: 24px!important;
    font-family: 'Hind', sans-serif!important;
    font-weight: 400;
    padding-top:200px;

    }

#anchor-icon{padding-bottom: 30px;}

Answer 5

Add display:inline-block to .banner-sub class.

.banner-sub {
    display: inline-block;
    font-family: "Hind",sans-serif !important;
    font-size: 24px !important;
    font-weight: 400;
    padding-top: 200px;
}

jsfiddle