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

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