`ul` with box shadow and margins around `li` elements - html

Question

I am trying to recreate this team/leadership page:
I have put a box shadow around my ul element, as the example above does. I can't get the margins around the li elements the same way - I set the right margins to be 5 px, but it still bordered with white. How do I get the margins (or space between li elements) to just be filled with the background color of the div (or the ul in this case)?
JSFiddle here: http://jsfiddle.net/mzechar/gyo6t25e/10/
HTML:
<section class = "content-wrapper team">
<h3>Columbia</h3>
<div class = "team-listing">
<ul>
<li>
<div class = "team-member-listing-wrapper">
<div class = "circle-image-crop">
<img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
</div>
Jane Jam
<br>
<span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class = "team-member-listing-wrapper">
<div class = "circle-image-crop">
<img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
</div>
Jane Jam
<br>
<span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class = "team-member-listing-wrapper">
<div class = "circle-image-crop">
<img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
</div>
Jane Jam
<br>
<span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class = "team-member-listing-wrapper">
<div class = "circle-image-crop">
<img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
</div>
Jane Jam
<br>
<span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class = "team-member-listing-wrapper">
<div class = "circle-image-crop">
<img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
</div>
Jane Jam
<br>
<span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class = "team-member-listing-wrapper">
<div class = "circle-image-crop">
<img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
</div>
Jane Jam
<br>
<span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class = "team-member-listing-wrapper">
<div class = "circle-image-crop">
<img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
</div>
Jane Jam
<br>
<span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class = "team-member-listing-wrapper">
<div class = "circle-image-crop">
<img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
</div>
Jane Jam
<br>
<span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class = "team-member-listing-wrapper">
<div class = "circle-image-crop">
<img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
</div>
Jane Jam
<br>
<span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class = "team-member-listing-wrapper">
<div class = "circle-image-crop">
<img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
</div>
Jane Jam
<br>
<span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class = "team-member-listing-wrapper">
<img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
<span class = "team-member-name">Jane Jam</span>
</div>
</li>
</ul>
</div>
</section>
CSS:
section.team{
margin: auto;
overflow: hidden;
background: #FEFEFE;
display:inline-block;
}
.team-listing{
position:relative;
margin-top:40px;
margin-right:auto;
margin-left:auto;
}
.team-listing li{
display:inline-block;
width: 30%;
overflow: hidden;
float:left;
height: 320px;
list-style-position:inside;
margin-right:5px;
background-color:#FEFEFE;
}
.bio{
display: inline-block;
text-align:left;
color: #111;
font-size: 1rem;
line-height: 1;
visibility:hidden;
}
.team-member-listing-wrapper{
text-align: center;
vertical-align: top;
width:100%;
height:100%;
margin: 0 auto;
display:inline-block;
}
.team-member-listing-wrapper strong{
font-size: 1.125rem;
line-height: 1;
}
.team-listing ul{
display:table;
list-style: none;
box-shadow:0 0.9375rem 3.75rem rgba(2,2,22,0.1);
white-space: nowrap;
width:80%;
margin:auto;
}
.circle-image-crop{
width: 180px;
height: 180px;
position: relative;
overflow: hidden;
border-radius: 50%;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
.circle-image-crop:hover{
height:100%;
width:auto;
border-radius:0%;
}
.circle-image-crop img{
display: inline;
margin: 0 auto;
height: 100%;
width: auto;
}

Answer 1

You would have to use filter: drop-shadow(5px 5px 5px #222); in this case as the shadow for the <ul>.
Box-shadow is only around the div, and doesn't fill the inside of it.
Box-shadow vs Drop shadow