Images 'moving' on browser resize

[RunTimeError]

Hello,

I've made a website but I've run into a problem. The site looks great when the user has the browser window maximized but when the browser is minimized an image I have on the right side of the screen is pushed over onto my background image.

This is what I want it to look like when the browser is maximized.

http://i825.photobucket.com/albums/zz180/Confused_Programmer/maximized.jpg

But this is what happens when I minimize the window:

http://i825.photobucket.com/albums/zz180/Confused_Programmer/Minimized.jpg

I've ran into this problem before but not really sure how to get around this. I tried to do position:relative, absolute but that did not work either:

<div id="BackGround" class="main">
     <img src="images/SidePanel.jpg" class="brandsPic"  
       alt="Brands" />
</div>

my css:

.main
{
	background-image: url("../images/Background.jpg");
	background-repeat:no-repeat;
	top:auto;
	background-position:bottom;
	position:relative;
	height:500px;
}
.brandsPic
{
	margin-left:50px;
	margin-right:auto;
	position:relative;
}

I'm not sure how to make that img "Stay" in that spot regardless of the window size. Is there a tutorial or something I'm missing?

[pritaeas]

The margin-left of the image is causing this. if you add to .main 50px left for the background image it will probably solve your problem.

[RunTimeError]

I fixed it. I put that div into a container div and set the width to 1200px;

<div id="container" class="container">
    <div id="BackGround" class="main">
      <img src="images/SidePanel.jpg" class="brandsPic" alt="Brands" />
    </div>
</div>