Second time posting this question. First time, I had some responses but then we changed the site design a bit.
All I want to do is have the teal bar extends across the browser like the top teal bar. I tried repositioning the footer div but it just seems to mess things up more.
/* ~~ The footer ~~ */
padding: 10px 0 0 0;