How to align footer columns foundation zurb

Question

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

Answer 1

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>