How to align footer columns foundation zurb

I am trying to create footer navigation. I followed a video from Gary Jennings. I copied everything that he did in both HTML and CSS. My footer is not aligning horizontally but in a column stacked on top of each other. I need my footer to have 3 columns set next to each other.

This is what one of the sections or "columns" looks like in the code. code view

website view

Try Equalizer as in the Zurb Site Docs:

    <div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq">
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/square-1.jpg">
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
</div>