Hi all, urgent help needed please.

I am trying to overlap elements while keeping the display responsive on landscape display for desktop (I have not set the tablet and phone settings yet, so I'm not talking about this here). I have put my elements in nested columns and have used nested row margins and column margins to move blocks up, down, left and right. But the display is not responsive, so I'm not sure which margins to set to get this to work. When do I set it on the row, when do I set it on the column and when on the element itself for this design?

I am spending a lot of time trying out different settings (I also tried absolute). I have an understanding of bootstrap, but I'm struggling with this design.

I'm also not sure that I have done the text on top of colored boxes correctly - any help will be appreciated.

This is what I have at the moment: http://lavienouvelle.lovemysite.co.za/

Here are links to examples of the pdf design:

http://lavienouvelle.lovemysite.co.za/images/homepage.jpg http://lavienouvelle.lovemysite.co.za/images/new-phase.jpg

I am placing login details in the hidden content.

Thank you