divs don't inherit css (they should)

Vote count:

0

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

asked 53 secs ago

user3123165

98

divs don't inherit css (they should)