title: Div's within another div not visible
body: <p>I am trying to get some CSS3 effects on my site what I tried to do is this :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="animate.css"&gt;
  &lt;div class="header"&gt;
  
  &lt;div class="header_box1"&gt;
  &lt;div class="small_header_box"&gt;2222222222 &lt;/div&gt;
  &lt;div class="small_header_box"&gt; 2222222222&lt;/div&gt;
  &lt;div class="small_header_box"&gt;2222222222 &lt;/div&gt;
  &lt;div class="small_header_box"&gt;2222222222 &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="header_box2"&gt;
  &lt;div class="small_header_box"&gt; 3333333333&lt;/div&gt;
  &lt;div class="small_header_box"&gt; 3333333333&lt;/div&gt;
  &lt;div class="small_header_box"&gt; 3333333333&lt;/div&gt;
  &lt;div class="small_header_box"&gt; 3333333333&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="header_box3"&gt;
  &lt;div class="small_header_box"&gt; aaaaaaaaa&lt;/div&gt;
  &lt;div class="small_header_box"&gt; aaaaaaaaa&lt;/div&gt;
  &lt;div class="small_header_box"&gt; aaaaaaaaa&lt;/div&gt;
  &lt;div class="small_header_box"&gt; aaaaaaaaa&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.header_box1{
   background-color: red;  
  }
  
  .header_box2{
   background-color: skyblue;  
  }
  
  .header_box3{
   background-color: yellow;  
  }
  .small_header_box{
   background-color: green;  
     width: 50px;  
      height: 50px; 
  
      float: left;
  }
  
  
  .header {  
      width: 1000px;  
      height: 300px;  
      margin: 25px auto;  
      overflow: hidden;  
      position: relative;  
      border: 1px solid #000;  
      margin: 25px auto;    
  
      background-color: #222;  
  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
  
    -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);  
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);  
  }  
  
  
     .header div {  
      position: absolute;  
      font-family: Tahoma, Arial, sans-serif;  
      width: 100%;  
      height: 100%;  
      margin: 0;  
      line-height: 50px;  
      text-align: center;  
      color: #fff;  
    text-shadow: 1px 1px 0px #000000;  
    filter: dropshadow(color=#000000, offx=1, offy=1);  
  
     transform:translateX(100%);  
  }  
  
  @keyframes left-one {  
      0%  {  
          transform:translateX(100%);  
      }  
      3% {  
          transform:translateX(0);  
      }  
      30% {  
          transform:translateX(0);  
      }  
      31% {  
          transform:translateX(-100%);  
      }  
      99%{  
          transform:translateX(-100%);  
      }  
      100%{  
          transform:translateX(-100%);  
      }  
  }  
  @keyframes left-two {  
      0% {  
          transform:translateX(100%);  
      }  
      33% {  
          transform:translateX(100%);  
      }  
      34% {  
          transform:translateX(0);          
      }  
      66% {  
          transform:translateX(0);          
      }  
      67%{  
          transform:translateX(-100%);  
      }  
      100%{  
          transform:translateX(-100%);  
      }  
  } 
  @keyframes left-three {  
      0% {  
          transform:translateX(100%);  
      }  
      67% {  
          transform:translateX(100%);  
      }  
      68% {  
          transform:translateX(0);          
      }  
      98% {  
          transform:translateX(0);          
      }  
      99%{  
          transform:translateX(-100%);  
      }  
      100%{  
          transform:translateX(-100%);  
      }  
  }  
  
  .header div:nth-child(1) {  
      animation: left-one 15s ease infinite;  
  }  
  .header div:nth-child(2) {  
      animation: left-two 15s ease infinite;  
  }  
  .header div:nth-child(3) {  
      animation: left-three 15s ease infinite;  
  } 
  </code></pre>
  
  <p>What I want to do is that three div's be in a non stop animation and each div contain four different dives within them. What happens here is, Three Divs do get animated but the four div's within the <strong>header_box(x)</strong> div are not visible. one div acquires all the space available and the remaining three divs are not visible. What should I do so that all the four divs within the Header_box1,Header_box2,Header_box3 are visible. </p>