Почему divы, без ширины, обрезаются с правой стороны при маленьких разрешениях браузера?
Вообще не ок делать {margin: 0 auto;} для body
используйте внутри дополнительный блок, который задает ширину и центровку относительно body
Попробуй вот так, если я понял суть..bg {
    background: url(../images/bg1.png) no-repeat center top;
    min-height: 300px;
    width: 100%;
}