Div shadow is not showing and appearing side by side - html

Question

For some reason Div block shadow is not showing and the last block's shadow is appearing side by side. I don't know what else I need to do. I have z-index and position set to relative but it's still not working as expected.
Edit: I want the blocks to be side by side and responsible.
.main {
padding-top: 10px;
-moz-column-count: 4;
-moz-column-gap: 0;
-webkit-column-count: 4;
-webkit-column-gap: 0;
column-count: 4;
column-gap: 0;
}
.main .columnBlock {
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin: 0 4px 8px 8px;
-webkit-box-shadow: 0px 2px #d4d6d8;
-moz-box-shadow: 0px 2px #d4d6d8;
box-shadow: 0px 2px #d4d6d8;
position: relative;
z-index: 999;
}
.column {
display: inline-block;
min-width: 140px;
width: 22%;
vertical-align: top;
padding-top: 8px;
}
.column ul {
margin-top: 4px;
margin-bottom: 1em;
}
.column ul {
display: inline-block;
width: 100%;
vertical-align: baseline;
height: 100%;
}
#media screen and (max-device-width: 9999px) {
.column {
width: 100%;
height: auto;
float: none;
}
}
<div class="main" style="width: 100%;">
<div class="columnBlock">
<div class="column">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
<!-- .columnBlock -->
<div class="columnBlock">
<div class="column">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
<!-- .columnBlock -->
</div>
<!-- .main -->

Answer 1

I believe this is what you're looking for. I removed the column count and gap, and just using margin and floats with #media queries. I added two more columns so you can see it in action.
HTML:
<div class="main" style="width: 100%;">
<div class="columnBlock">
<div class="column">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
<!-- .columnBlock -->
<div class="columnBlock">
<div class="column">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
<!-- .columnBlock -->
<div class="columnBlock">
<div class="column">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
<!-- .columnBlock -->
<div class="columnBlock">
<div class="column">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
<!-- .columnBlock -->
</div>
<!-- .main -->
CSS:
.main {
padding-top: 10px;
display: flex;
flex-wrap: wrap;
}
.main .columnBlock {
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin: 0 4px 8px 8px;
-webkit-box-shadow: 0px 2px #d4d6d8;
-moz-box-shadow: 0px 2px #d4d6d8;
box-shadow: 0px 2px #d4d6d8;
position: relative;
z-index: 999;
float: left;
margin: 5px;
}
#media screen and (max-width:767px) {
.columnBlock {
width: calc(50% - 10px);
}
}
#media screen and (min-width:768px) {
.columnBlock {
width: calc(33.3333% - 10px);
}
}
#media screen and (min-width:992px) {
.columnBlock {
width: calc(25% - 10px);
}
}
.column {
display: block;
vertical-align: top;
padding-top: 8px;
}
.column ul {
margin-top: 4px;
margin-bottom: 1em;
}
.column ul {
display: inline-block;
width: 100%;
vertical-align: baseline;
height: 100%;
}
And here's a working fiddle: https://jsfiddle.net/u2h1cwzt/3/
All your shadows are where they are supposed to be and it's responsive.
Edit: added display: flex, to prevent gaps.
EDIT: Without Flex: https://jsfiddle.net/u2h1cwzt/4/
CSS: WITHOUT FLEX
.main {
padding-top: 10px;
}
.main .columnBlock {
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin: 0 4px 8px 8px;
-webkit-box-shadow: 0px 2px #d4d6d8;
-moz-box-shadow: 0px 2px #d4d6d8;
box-shadow: 0px 2px #d4d6d8;
position: relative;
z-index: 999;
float: left;
margin: 5px;
}
#media screen and (max-width:767px) {
.columnBlock {
width: calc(50% - 10px);
}
.columnBlock:nth-of-type(odd) {
clear: left;
}
}
#media screen and (min-width:768px) {
.columnBlock {
width: calc(33.3333% - 10px);
}
.columnBlock:nth-of-type(odd) {
clear: none;
}
.columnBlock:nth-of-type(3n+1) {
clear: left;
}
}
#media screen and (min-width:992px) {
.columnBlock {
width: calc(25% - 10px);
clear: none !important;
}
}
.column {
display: block;
vertical-align: top;
padding-top: 8px;
}
.column ul {
margin-top: 4px;
margin-bottom: 1em;
}
.column ul {
display: inline-block;
width: 100%;
vertical-align: baseline;
height: 100%;
}

Answer 2

i think this is what you are looking for (if i understood right). i added angularjs ng-repeat but it's just for convenient. there is also a link for a version with only html and css.
link1 - with angular https://jsfiddle.net/suunyz3e/1408/
link2 - only html and css https://jsfiddle.net/suunyz3e/1410/
html:
<div ng-app="myModule" ng-controller="myCtrl">
<div class="div-item" ng-repeat="item in loopArray">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
css:
.div-item{
display:inline-block;
min-width:140px;
background-color:#fff;
margin:5px;
border:1px solid red;
border-radius: 4px;
-webkit-box-shadow: 0px 2px #d4d6d8;
-moz-box-shadow: 0px 2px #d4d6d8;
box-shadow: 0px 2px #d4d6d8;
}
angualrjs
angular.module('myModule', [])
.controller('myCtrl', function ($scope) {
$scope.loopArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
});