How do I have to different background colors on a page

I want the backforund to be blue and the main page to be white

Make sure you give your .main-color: white.

But your main page is full width because you didn’t specify its width. I would give your form a set width and center it using margin:0 auto;

You could make the background-color of the body white, and then use a .container div with a blue background-color to hold your form. That might give you the effect you are looking for.