At 1090px screen width or in tablet mode, the columns do not align side by side and instead one is pushed down creating a white space between them. I am using Foundation 6 with 12 columns, but it does not work well on medium-sized screens; it only functions properly on large desktop sizes.
.white-no-content {
background-color: #fff;
height: 0px;
}
.black-no-content {
background-color: #000;
height: 100px;
}
#left-about {
background-color: #e6e3e3;
height: 75px;
}<!-- back white sections -->
<section class="row">
<article class="columns medium-2 black-no-content">
</article>
<article class="columns medium-10 white-no-content">
</article>
</section>
<!-- about -->
<section class="row">
<article class="columns medium-2" id="left-about">
</article>
<article class="columns medium-10 text-center">
<div>
<a href="#fashion-about">ABOUT</a>
</div>
</article>
</section>