Divs überlappen

Ich habe ein Problem, wo die divs überlappen, obwohl Sie sollte unten erscheinen jeder andere, ich habe keine Ahnung, warum dies geschieht.

Container

  <div class="container">
        <div class="box" style="float:right">
            <p></p>
        </div>

        <div class="box" style="float:left">
            <p></p>
        </div>


            <div class="longContent topLongContent">
         <h2>Long Content</h2>
         <p></p>
            </div>

            <div class="longContent">
         <h2>Long Content</h2>
         <p></p>
            </div>

            <div class="longContent">
         <h2>Long Content</h2>
         <p></p>
            </div>

  </div>

Stylesheet

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

Ich habe sogar versucht haben, entfernen die .topLongContent aber der Inhalt immer noch über die Runden und tut so, als würde die box divs sind Teil der longContent divs.