Очистить белый фон от "" контента

Question

белый фон

в веб-дизайне. Я пытаюсь заставить карты показываться рядом, но они появляются как изображение, с белым фоном и стеком по вертикали вместоодин рядом с другим.

я использую миксин с clearfix.класс, к которому я его применяю, это класс строк.

@mixin clearfix{
&::after{

    content: " ";
    display: table;
    clear: both;
}

.row {
max-width: $grid-width;
background-color: #eee;
margin: 0 auto;


&:not(:last-child) {
    margin-bottom: $gutter-vertical;
}


@include clearfix;

[class^="col-"] {

    float: left;

    &:not(:last-child) {
        margin-right: $gutter-horizontal;
    }
}

.col-1-of-2 {
    width: calc((100% - #{$gutter-horizontal}) /2);

}

.col-1-of-3 {
    width: calc((100% - 2 * #{$gutter-horizontal}) /3);
}
.col-2-of-3 {
    width: calc(2 * ((100% - 2 * #{$gutter-horizontal}) /3) + #{$gutter-horizontal});
}
.col-1-of-4 {
    width: calc((100% - 3 * #{$gutter-horizontal}) /4);
}

.col-2-of-4 {
    width: calc(2* ((100% - 3 * #{$gutter-horizontal}) /4) + #{$gutter-horizontal});
}

  .col-3-of-4 {
      width: calc(3* ((100% - 3 * #{$gutter-horizontal}) /4) + 2 * #{$gutter-horizontal});
  }

}

Это мой HTML

 <div class="row">
            <div class="col-1-of-4">
                <div class="feature-box">
                    <i class="feature-box__icon icon-basic-world"> </i>
                    <h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
                    <p class="feature-box__text">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio consequatur laboriosam eum!
                        Earum ipsa totam eius.
                    </p>
                </div>
            </div>
        </div>

и значения для переменной

$grid-width: 114rem;

$ вертикальный желоб: 8rem;$ горизонтальный желоб: 6rem;