Foundation 6: top-bar-right and left stack when wrapping - zurb-foundation

Question

When designing a webpage using Zurb Foundation 6, top-bar-left and top-bar-right of the navigation menu stack when put into a wrap class, even when scaled to full screen. The top-bar-right ends up being just below and indented from top-bar-left. How do I fix this issue so that the top-bar-right section stays in line with top-bar-left and is not stacked?
The top-bar-right section works fine when the wrap class is not applied to a div within the nav class. I've tried only applying the wrap class to top-bar-left only instead of the entire nav class, and also tried a "float: right" for top-bar-right in CSS, but neither method solved the problem.
HTML code:
<!-- DESKTOP NAVIGATION -->
<nav class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
And the CSS:
/*GENERAL*/
.wrap {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}

Answer 1

There are attributes on top-bar that are making its dependents display inline and stack for narrow displays (display: flex for one). You could apply all the appropriate attributes to the wrap class as well but why reinvent the wheel? Doesn't that negate the whole reason for using a grid system in the first place? Try removing the extra div and put the wrap class on the nav element instead:
<nav class="top-bar wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
Or to simplify things, you could just put those attributes on .top-bar and not have a wrap class:
.top-bar {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
If you need a wrapper div, put it outside top-bar, not inside.