Strange Margin showing up in a flexbox - css

Question

I have tried negative margins and other hacks but as far as i know, there shouldn't be any margins there in the first place. With just a simple box i can get zero margins between the tags but somehow the stuff outside that is messing with it.
The problem is with the neon blue badges in the bottom right corner.
.info{
display: flex;
flex-direction: row;
// justify-content: space-between;
}
.column {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 48%;
min-height: 61.9px;
// background-color: #00ffff;
display: flex;
flex-direction: column;
}
.info-block{
display: flex;
flex-direction: column;
}
.spacer{
height:14.7px;
width: 1px;
}
.tag{
line-height: 0;
display:inline-block;
height: 15.8px;
width:40px;
padding-right: 4px;
padding-left: 4px;
padding-top: 2px;
background-color: #00ffff;
border-radius: 4px;
}
.tag-container{
line-height: 0;
width: 168px;
height:78px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.tag-text{
width:20px;
font-family: HelveticaNeue-Bold;
font-size: 8px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
text-align: center;
color: #ffffff;
}
<div class="info">
<div class="column">
<div class="info-block">
<div class="info-header">Location</div>
<div class="info-text">place</div>
</div>
<div class="spacer"></div>
<div class="info-block">
<div class="info-header">Mobile</div>
<div class="info-text">[phone]</div>
</div>
</div>
<div class="column">
<div class="info-block">
<div class="info-header">Menu</div>
<div class="info-text"><a>bk.com</a></div>
</div>
<div class="spacer"></div>
<div class="info-block ">
<div class="info-header">Tags</div>
<div class="tag-containter">
<div class="tag"><div class="tag-text">h</div></div>
<div class="tag"><div class="tag-text">Som</div></div>
<div class="tag"><div class="tag-text">Somethg</div></div>
<div class="tag">
<div class="tag-text">ng</div>
</div>
<div class="tag">
<div class="tag-text">Somhing</div>
</div>
</div>
</div>
</div>

Answer 1

You only made a silly mistake.
Just check your class name .tag-containter in css and html.
you use .tag-container instead of tag-containter class.

Answer 2

you mispelled the class tag-container either in the html (tag-containter) or in the css . notice the extra T in html and missing in css selector
.info {
display: flex;
flex-direction: row;
/* justify-content: space-between;*/
}
.column {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 48%;
min-height: 61.9px;
/* background-color: #00ffff;*/
display: flex;
flex-direction: column;
}
.info-block {
display: flex;
flex-direction: column;
}
.spacer {
height: 14.7px;
width: 1px;
}
.tag {
line-height: 0;
height: 15.8px;
width: 40px;
padding-right: 4px;
padding-left: 4px;
padding-top: 2px;
background-color: #00ffff;
border-radius: 4px;
}
.tag-containter {
width: 168px;
height: 78px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.tag-text {
font-family: HelveticaNeue-Bold;
font-size: 8px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
text-align: center;
color: #ffffff;
}
<div class="info">
<div class="column">
<div class="info-block">
<div class="info-header">Location</div>
<div class="info-text">place</div>
</div>
<div class="spacer"></div>
<div class="info-block">
<div class="info-header">Mobile</div>
<div class="info-text">[phone]</div>
</div>
</div>
<div class="column">
<div class="info-block">
<div class="info-header">Menu</div>
<div class="info-text"><a>bk.com</a>
</div>
</div>
<div class="spacer"></div>
<div class="info-block ">
<div class="info-header">Tags</div>
<div class="tag-containter">
<div class="tag">
<div class="tag-text">h</div>
</div>
<div class="tag">
<div class="tag-text">Som</div>
</div>
<div class="tag">
<div class="tag-text">Somethg</div>
</div>
<div class="tag">
<div class="tag-text">ng</div>
</div>
<div class="tag">
<div class="tag-text">Somhing</div>
</div>
</div>
</div>
</div>

Answer 3

.tag is set to display: inline-block;, which is an inline element. Spaces between inline elements are preserved in HTML, so if you have spaces (or returns) between the elements, you will see a space between the elements on the page. To remove the spaces between the .tag boxes, remove the actual spaces between those elements.