overlapping rows and sections html css bootstrap

Question

I am having an issue with overlapping elements which I don't want. I'm sure it's all right but I can't work out why. This is a one page lay out with a fixed navigation on top. There are five sections home, services, gallery, contact, about. The service section is behind the about section when zooming. I wrote this example to illustrate my point. CSS, HTML, Bootstrap 3

//css
section {
   position:relative;
   padding:80px 0;
   min-height:100%;

}

<section id ="services">
   <div class = "container">
       <div class = "row">
             <div class="col-md-4">
                       some text and an icon etc...
             </div>
             <div class="col-md-4">
                       some text and an icon etc...
             </div>
             <div class="col-md-4">
                       some text and an icon etc...
             </div>
        </div>
     </div>
  </section>

  <section id = "about">
     <div class = "container">
        <div class = "row">

When zoom in they stack but only show the first block in the service section the other two blocks are hidden behind the about section.

Answer 1

use :

*{
    box-sizing: border-box;
  }

it will solve .