Please see the image.
The footer layout is broken.
Even when i remove the footer-3 position, the footer-2 takes it's place.

In which positions have you assigned your modules?

What do you mean? It's the default i never touched the footer and i can't find out with DW why this problem happens.If i try to change the percentage then the whole template becomes a mess.

You just disabled the fourth module from the footer and got this result?
I'm asking to narrow down the issue.

Even if i re-enable the 4th module it goes where the 3rd is now.
Kindly remind you that we did together some changes due to other problems with the layout, so maybe some of these changes create the problem.
Although i deleted everything from custom.css the problem is still there.

There seems to be something not closing properly in template.css file.
In line 171 there is a select property with no {} tags.
Also make sure that in
*, *:before, *:after { -moz-box-sizing: border-box; } to add box-sizing:border-box; along with the previous for mozilla.
It is located in line 133.

This is what i have starting from line 132. I added the extra tag on line 171. Nothing changed.

/* Foundation 4 Grid / Block Grid / Visibility components */
*, *:before, *:after { -moz-box-sizing: border-box; }

html, body { font-size: 100%; }

body { background: #fff; color: #222; padding: 0; margin: 0; font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; font-weight: normal; font-style: normal; line-height: 1.3; position: relative; cursor: default; }

a:hover { cursor: pointer; }

a:focus { outline: none; }

img, object, embed { max-width: 100%; height: auto; }

object, embed { height: 100%; }

img { -ms-interpolation-mode: bicubic; }

#map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object { max-width: none !important; }

.left { float: left !important; }

.right { float: right !important; }

.text-left { text-align: left !important; }

.text-right { text-align: right !important; }

.text-center { text-align: center !important; }

.text-justify { text-align: justify !important; }

.hide { display: none; }

.antialiased { -webkit-font-smoothing: antialiased; }

img { display: inline-block; vertical-align: middle; }

textarea { height: auto; min-height: 50px; }

select { width: 100%; }

I had to delete the extra tag on line 171 cause it was breaking many other parts on the template.

Add to
*, *:before, *:after { -moz-box-sizing: border-box; }

a

box-sizing: border-box;
It is located right under
/* Foundation 4 Grid / Block Grid / Visibility components */

fixed!

Thank you.