Padding and Margin not working - html

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"> WHY CHOOSE US</div>
<div id="anchor-icon"><img src="images/down-icon.png" /></div>
</div>
</div>
</div>

Answer 1

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

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

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"> WHY CHOOSE US
</div>
<div id="anchor-icon">
<a href="#">
<img src="images/down-icon.png" />
</a>
</div>
</div>
</div>
</div>

Answer 4

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 5

#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;}