Div重叠

我有一个问题,div在彼此重叠,即使它们应该出现在彼此之下,我不知道为什么会发生这种情况.

容器

  

        

            

        

        

            

        


            

         
Long Content
         

            

            

         
Long Content
         

            

            

         
Long Content
         

            

  

样式表

  body{
background-image:url('sos.png');
color:#ecf0f1;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 300;
   }

  .container{
width:50%;
margin: 0 auto;
  }


   .box{
width:49%;
background-color:#2c3e50;   
margin-top:5%;
   }

   .box p{
 padding: 2% 5% 3% 5%;
   }

   .box h2{
 font-weight:800;
 padding: 2% 5% 0% 3%;
    }

   .longContent{
     width:100%;
 margin: 0 auto;
 background-color:#34495e;
 margin-top:2%;
    }

   .topLongContent{
 margin-top:16%;
   }

   .longContent p{
 padding: 2% 5% 3% 5%;
   }

   .longContent h2{
 font-weight:800;
 padding: 2% 5% 0% 3%;
   }

   .header{
 width:100%;
 background-color:#2c3e50;  

/*  Drop shadow Bottom */
-webkit-box-shadow: 0 6px 4px -6px black;
   -moz-box-shadow: 0 6px 4px -6px black;
        box-shadow: 0 6px 4px -6px black;
    }


    .header h1{
  font-size:2.5em;
  font-weight:900;
  padding: 1% 0% 1% 3%;
     }

     .callToAction{
   float:right;
   font-size:1.25em;
   margin:-2% 5% 0% 0%;
   color:#f39c12;
      }

我甚至尝试删除.topLongContent但内容仍然超过圈数,并表现为盒子div是div的一部分longContent.