divs don't inherit css (they should) - html

Question

I have this simple html and css (sass) with some nesting, but not much. The problem I have is that in the first big div all sub-elements are displayed inside as they are written, but in the other div (same class) bg-color and margin cover only the heading and not the other elements in that div.
What is happening?
codepen link
* {
box-sizing: border-box;
}
.intro {
position: relative;
display: block;
background: #F3F5F8;
padding: 50px 0;
text-align: center;
color: slategray;
}
.intro:nth-child(2) {
background: #e8e6e3;
}
.intro section {
margin-left: auto;
margin-right: auto;
padding-left: 50px;
padding-right: 50px;
width: 600px;
}
.intro section .column {
position: relative;
float: left;
width: 33.33333%;
padding: 0 20px;
}
.intro section .column .item {
position: relative;
margin: 30px auto;
width: 15px;
height: 15px;
max-width: 100%;
display: block;
background: cadetblue;
border-radius: 50%;
}
.intro section .column h3 {
font: 0.6em "Montserrat", sans-serif;
padding: 0;
margin: 0;
letter-spacing: 0.5em;
}
.intro section .column p {
font: 0.8em/1.8em "Arimo", sans-serif;
padding: 0;
margin: 25px 0;
}
.intro section h2 {
font: 2em "Montserrat", sans-serif;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.intro section h4 {
font: 0.6em "Montserrat", sans-serif;
padding: 0;
margin: 0;
letter-spacing: 0.5em;
}
.intro section p {
font: 0.8em/1.8em "Arimo", sans-serif;
padding: 0 120px;
margin: 45px 0 0;
}
<div class="intro">
<section>
<h4>WHO WE ARE</h4>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolorum voluptas, ullam vero est.</p>
</section>
</div>
<div class="intro">
<section>
<h4>WHAT WE DO</h4>
<h2>HEADING</h2>
<div class="column">
<div class="item"></div>
<h3>ITEM1</h3>
<p>Necessitatibus ipsa ex hic sunt maxime.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM2</h3>
<p>Molestias ipsum ex deleniti illo qui obcaecati repellat.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</section>
</div>
Thanks

Answer 1

because your .column divs are float:left; you need a container with clear:both; after the columns:
<section>
<h4>WHAT WE DO</h4>
<h2>HEADING</h2>
<div class="column">
<div class="item"></div>
<h3>ITEM1</h3>
<p>Necessitatibus ipsa ex hic sunt maxime.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM2</h3>
<p>Molestias ipsum ex deleniti illo qui obcaecati repellat.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="clearer"></div>
</section>
CSS
.clearer {
clear:both;
}
http://codepen.io/anon/pen/myvwNY
Without the clear the container the floating divs are in has no height.

Answer 2

Think I understand - you have column collapse from the floated column
http://codepen.io/anon/pen/vEbZoP
just add a clear after them like so
<div class="clear"></div>
.clear
clear: both;

Answer 3

This is due to floats of .colomn , you can use conatain float or clearfix techniques
I have listed tow of them below
1) added <p></p> with clear both sides after floated element
2) add overflow:hidden to the parent of floated element (ie )
Read more about clearfix and containing floats
* {
box-sizing: border-box;
}
.intro {
position: relative;
display: block;
background: #F3F5F8;
padding: 50px 0;
text-align: center;
color: slategray;
}
.intro:nth-child(2) {
background: #e8e6e3;
}
.intro section {
margin-left: auto;
margin-right: auto;
padding-left: 50px;
padding-right: 50px;
width: 600px;
}
.intro section .column {
position: relative;
float: left;
width: 33.33333%;
padding: 0 20px;
}
.intro section .column .item {
position: relative;
margin: 30px auto;
width: 15px;
height: 15px;
max-width: 100%;
display: block;
background: cadetblue;
border-radius: 50%;
}
.intro section .column h3 {
font: 0.6em "Montserrat", sans-serif;
padding: 0;
margin: 0;
letter-spacing: 0.5em;
}
.intro section .column p {
font: 0.8em/1.8em "Arimo", sans-serif;
padding: 0;
margin: 25px 0;
}
.intro section h2 {
font: 2em "Montserrat", sans-serif;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.intro section h4 {
font: 0.6em "Montserrat", sans-serif;
padding: 0;
margin: 0;
letter-spacing: 0.5em;
}
.intro section p {
font: 0.8em/1.8em "Arimo", sans-serif;
padding: 0 120px;
margin: 45px 0 0;
}
<div class="intro">
<section>
<h4>WHO WE ARE</h4>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolorum voluptas, ullam vero est.</p>
</section>
</div>
<div class="intro">
<section>
<h4>WHAT WE DO</h4>
<h2>HEADING</h2>
<div class="column">
<div class="item"></div>
<h3>ITEM1</h3>
<p>Necessitatibus ipsa ex hic sunt maxime.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM2</h3>
<p>Molestias ipsum ex deleniti illo qui obcaecati repellat.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<p style="clear:both"></p>
</section>
</div>