percent width doesn't work with 3 columns - html

Question

I try to make 3 column responsive menu with images ,but when I change the #teams .teams width to percents ,div disappears. Any solutions, please!?
There is my code
#teams .team_select {
display: table;
margin: 0 auto 20px auto;
}
#teams #choose {
display: inline-block;
/*width: 32.4%;*/
width: calc(98% / 3);
}
#teams #choose:nth-child(1) {
margin-right: 1%;
}
#teams #choose:nth-child(2) {
margin-right: 1%;
}
#teams .teams {
display: table-cell;
background-size: cover;
background-position: center;
/*width: 360px;
height: 370px;*/
width: calc(98% / 3);
height: auto;
transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
-pre-transition: background-image 1s ease-in-out;
}
#teams .back {
background-image: url("https://f4.bcbits.com/img/a3503173982_16.jpg");
}
<div class="team_select">
<div id="choose">
<a href="">
<div class="teams back"></div>
</a>
</div>
<div id="choose">
<a href="">
<div class="teams back"></div>
</a>
</div>
<div id="choose">
<a href="">
<div class="teams back"></div>
</a>
</div>
</div>
I made a JSFiddle too

Answer 1

I find the solution with this and made the short code ,but it works nice. Only problem is that ,with min-height he leave blank space after divs, and I dont know how to remove that.
HTML
<div id="teams">
<ul>
<li class="back"></li>
<li class="back"></li>
<li class="back"></li>
</ul>
</div>
CSS
#teams{
width:100%;
}
#teams ul{
overflow:auto;
}
#teams li{
list-style:none;
display:inline-block;
width: 31%;
min-height: 700px;
height: auto;
background-size: 100%;
background-repeat: no-repeat;
}
li.back{background-image:url("https://f4.bcbits.com/img/a3503173982_16.jpg");}
li.back:hover{background-image:url("https://designschool.canva.com/wp-content/uploads/sites/2/2015/10/How-To-Use-Blurred-Images-In-Your-Designs-To-Great-Effect_Thumbnail_01.png");}
There is new JSFiddle