框阴影到div容器

Question

I'm trying to achieve a box div with box shadow effect.

I managed to do it on css though for some reason the container doesn't look aligned with my grid of squares. If anyone could check what I am doing wrong that would be great!

Full code here

 .square-container {
  width: 350px;
  position: absolute;
  top:50%;
  left:50%;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);

}

So what I'm trying have is a grid of squares in a container with a box shadow affect.

Answer 1

Check this JS Fiddle

CSS

 .trigger {
  float:left;
  }
 .panel {
  /*margin-top:47px;*/ 
 }

 .panel .front {
 /*position: absolute;*/
 }