Menu icon Foundation
Unwanted breaks when using grid-x in 6.4.1

Hello,

I'm currently working on a personal project in django and have added foundation 6.4.1 via css downloads. I have included foundation in my project and I am calling it in my project like so:

in my head tags:

<link rel="stylesheet" type="text/css" href="{% static 'css/foundation.css' %}">

at the bottom of the body tag:
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="{%static 'js/foundation.js' %}"></script>

The {%%} is just a django thing.

<div class='grid-x'>
    <div class="cell auto">
        <h2><a href="{% url 'home' %}" style="color: white; font-family: 'Lato';">Home</a>
        </h2>
    </div>
    <div class="cell auto text-right">
        <h3><a class="navbar-link" href="{% url 'work' %}" style="background-color: transparent;">Work</a>
<a class="navbar-link" href="#" style="background-color: transparent;">"Blog"</a>
       </h3>
     </div>
</div>

The issue I am having is the cells are breaking line for some reason and I can't figure out why. Another example:

<div class="row">
            <div class="small-4 navbar-link">columns</div>
            <div class="small-4 navbar-link">columns</div>
            <div class="small-4 navbar-link">columns</div>
</div>

Shown in the screenshot below:

breaksrowgrid-xResponsive

Hello,

I'm currently working on a personal project in django and have added foundation 6.4.1 via css downloads. I have included foundation in my project and I am calling it in my project like so:

in my head tags:

<link rel="stylesheet" type="text/css" href="{% static 'css/foundation.css' %}">

at the bottom of the body tag:
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="{%static 'js/foundation.js' %}"></script>

The {%%} is just a django thing.

<div class='grid-x'>
    <div class="cell auto">
        <h2><a href="{% url 'home' %}" style="color: white; font-family: 'Lato';">Home</a>
        </h2>
    </div>
    <div class="cell auto text-right">
        <h3><a class="navbar-link" href="{% url 'work' %}" style="background-color: transparent;">Work</a>
<a class="navbar-link" href="#" style="background-color: transparent;">"Blog"</a>
       </h3>
     </div>
</div>

The issue I am having is the cells are breaking line for some reason and I can't figure out why. Another example:

<div class="row">
            <div class="small-4 navbar-link">columns</div>
            <div class="small-4 navbar-link">columns</div>
            <div class="small-4 navbar-link">columns</div>
</div>

Shown in the screenshot below: