I'm currently in the process of developing a website, but I am facing difficulties with clearing the floats. My website is built using the foundation 4 framework. Whenever I apply the .columns class to an element, it causes the elements to float left. However, when the browser window is resized, some elements increase in height, causing the element below to be pushed down to the next row.
I have attempted to add clear:left to the elements, but this action ends up shifting all elements to the left side of the page. Here is a screenshot illustrating the issue:
You can view the page where this occurs at the following URL:
Is there something crucial that I am overlooking?