CSS Div Postioning

[jKidz]

Hi All,
Please study the following code.

HTML

    <div id="welcome">
        Welcome Message 
    </div>
    <div id="Inquiry">
        Inquiry Form
    </div>
    <div id="products">
        Products
    </div>
    <div id="footer">
        footer
    </div>

CSS

#welcome{
    background-image:url(../images/company.jpg);
    background-size: 100% 100%;
    width:100%;
    height:600px;
    }
#inquiry{
    margin-top:600px;
    width:100%;
    height:500px;
    background-image:url(../images/light_grey.png);
    }
#products{
    margin-top:1100px; // (margin-top of inquiry + height of inquiry)
    width:100%;
    height:500px;
    background-image:url(../images/light_blue.png);
    }
    #footer{
    margin-top:1600px; // (margin-top of products + height of products)
    width:100%;
    height:500px;
    background-image:url(../images/black.png);
    }

With these styles, everything is ok in large devices (desktops & tablets).
But in mobiles most of divs are overlapping because of the margin-top values.
I know this is not a propery way of designing website responsively.
Could you please give me a solution?

[gentlemedia]

You can leave out the top margins, because a div tag is a block level element and will by default go on one line. The next div will drop below the other. The heights you set will also automatically push down the next div, so no need for the top margins.

[jKidz]

Thank you @gentlemedia