Removing white space between inline-block elements

by Richard Hunter

HTML

<div class="container">
 <span class="nav-item">hello</span>
 <span class="nav-item">world</span>
 <span class="nav-item">of</span>
 <span class="nav-item">love</span>

</div>

SCSS

.container {
    background : pink;
    text-align : center;
    padding : 20px;
    font-size : 0; //  font-size 0 on parent element
}

.nav-item {
    padding : 20px;
    background : yellow;
    font-size : 20px; // reset font-size on child element
}