html - items horizontally stack where they vertically do not -

if change between landscape , portrait portrait rows it's supposed to. in landscape, columns on top of each other. why that?

html:

<div class="itemcontainer">     <div class="item1"></div>     <div class="item2"></div>     <div class="item3"></div>     <div class="item4"></div>     <div class="item5"></div> </div> 

css:

html, body {     width: 100%;     height: 100%;     margin: 0;     padding: 0;     border: 0;     overflow: hidden; }  .itemcontainer {     position: fixed;     width: 100%;     height: 100%;     overflow: hidden; }  div {     position: absolute; }     .item1 {     background: rgb(255, 0, 0);     animation: animatein 1s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both; }  .item2 {     background: rgb(0, 255, 0);     animation: animatein 1.2s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both; }  .item3 {     background: rgb(0, 0, 255);     animation: animatein 1.4s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both; }  .item4 {     background: rgb(255, 255, 0);     animation: animatein 1.6s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both; }  .item5 {     background: rgb(255, 0,255);     animation: animatein 1.8s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both; }  @keyframes animatein {     0% {         left: 100%;     }     100% {         left: 0;     } }    @media screen , (orientation : landscape) {       div {         width: 20%;           height: 100%;            }      .item1 {left: 0%}     .item2 {left: 20%}     .item3 {left: 40%}     .item4 {left: 60%}     .item5 {left: 80%}   }   @media screen , (orientation : portrait) {       div {         width: 100%;           height: 20%;      }      .item1 {top: 0%}     .item2 {top: 20%}     .item3 {top: 40%}     .item4 {top: 60%}     .item5 {top: 80%}  } 

jsfiddle: https://jsfiddle.net/clankill3r/yzc8mty8/5/

update: screenies:

portrait good:

landscape bad:

it because of animation remove it.

animation: 1.8s cubic-bezier(0.535, 0.185, 0.89, 0.435) 0.4s alternate both 1 running animatein; 

or change in animation.

it works great check fiddle.