Reduce space between responsive div or classes html/css3 – Twitter bootstrap

I’m trying to create a website and I am trying to achieve responsive icon fonts. I’ve succeeded with that (using media queries) but when the screen changes a space begins to show and grow as the screen size gets smaller.

Small Screen size – Large space between icon fonts and the text

Big screen size – small space between icon fonts and text

Here is my HTML code – I’ve tried removing “< /span >” as a means to eliminate newlines:

   <div class="item"> 
<span class = "icon-mobile"> 
<span class="caption">Call </div>

<div class="item"> 
<span class = "icon-mail"> 
<span class="caption">Email </div> 

<div class="item"> 
<span class = "icon-location"> 
<span class="caption">Studio </div> 

<div class="item"> 
<span class = "icon-calendar">
<span class="caption">Hours</div>

Here is the CSS3 code for the above HTML divs/classes (.contact_details is the container):

.contact_details{
    text-align: center;
}

.item {
    vertical-align: top;
    display: inline-block;
    width:auto;
    height:auto;
    margin:0% auto; 
    color: #b31b1b;
}

/* Text Below Icon Fonts*/

.caption {
    display: block;
    text-align: center;
}

The CSS3 media queries code is:

@media screen and (max-width: 299px) {
    .icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item {
    font-size: 2vw;
    }

    .caption {
        font-size: 1.5vw;
    }
}

@media screen and (min-width: 300px) and (max-width: 799px) {
    .icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item{
        font-size: 90%;
    }
    .caption {
        font-size: 30%;

    }
}

@media screen and (min-width: 800px) {
    .icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item {
        font-size: 5vw;
    }

    .caption {
        font-size: 2vw;
    }
}

I have tried adding “height: 50px;” and “height: auto;” to the caption and item classes. I have tried creating a flexbox after creating a duplicate row on the website to test:

.contact_details2{
 display: flex;
justify-content: center;
}

.item2{
flex: 1 1 20em;
padding: 0!important;
}

.caption{
padding: 0!important;
}

Here is the code for the icon-fonts just incase it’s useful to someone:

@font-face {
    font-family: 'debssite';
    src: url('fonts/debssite.eot');
    src: url('fonts/debssite.eot?#iefix') format('embedded-opentype'),
    url('fonts/debssite.woff2?') format('woff2'),
    url('fonts/debssite.woff?') format('woff'),
    url('fonts/debssite.ttf?') format('truetype'),
    url('fonts/debssite.svg?') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'debssite';
    src: url('./fonts/debssite.svg?#debssite') format('svg');
  }
}
*/

[class^="icon-"]:before, 
[class*=" icon-"]:before {
    font-family: "debssite";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-calendar:before { 
    content: "e800"; 
    font-size: 64px;
    color: #b31b1b;
} 
.icon-location:before { 
    content: "e801"; 
    font-size: 64px;
    color: #b31b1b;
} 
.icon-mail:before { 
    content: "e802"; 
    font-size: 64px;
    color: #b31b1b;
} 
.icon-facebook:before { 
    content: "f09a"; 
    font-size: 32px;
    color: #b31b1b;
    margin-right 4%;
} 
.icon-mobile:before { 
    content: "f10b"; 
    font-size: 64px;
    color: #b31b1b;
    margin:0px;
} 
.icon-youtube:before { 
    content: "f167"; 
    font-size: 32px;
    color: #b31b1b;
    margin-right 4%;
} 
.icon-instagram:before { 
    content: "f16d"; 
    font-size: 32px;
    color: #b31b1b;
    margin-right 4%;
} 
.icon-pinterest:before { 
    content: "f231"; 
    font-size: 32px;
    color: #b31b1b;
    margin:10px;
}

I would appreciate any help/comments in trying to solve this, even if you think your comment won’t be helpful (it might be!).

Thank you,

Richard

created an edit to add the code for the icon-fonts.