Here is my webpage:

http://www.ivoog.com/link

The small box under the big box in positioned how I want it because I used margin-left:13px.

Now try to resize your browser. See how the big box movies but the smaller one stays in place?

I need both of the boxes left sides to be aligned no matter how you move your browser. How can I do this?

Please explain with detail as I am new to html and css. Thank you!

Put it in a table and align the table to the left. The table will put all in the same aspect ratio.... So, if the browser repositioned, then the table will hold it all together...

It's because you put a 1% left and right margin on your #header. In this case, the percentage is relative to the browser width, so when you make the browser smaller, the value of the margin is recalculated and - as a result - smaller, making the div move more to the left. I did a test in Dreamweaver here; I removed the margin and it stays put. Replace the percent with a value in pixels.

And please don't use tables. They are not necessary for layouts, except for tabular data. They create bloated code and accessibility issues for disabled people using screen readers.

yes, you could use a table, check using a div tag as well, and aligning that to the left. That might work, and would save some lines of code. Check whichever method you choose in both IE and Firefox, though, because IE can be REALLY screwy with css, though Im sure you know that.
Putting them both in the same block element should have the same effect, but css can be tricky sometimes. Perhaps align the left with the header class you use; also, is position relative in that context neccesary?

The changing differential is due to your use of 1% in the header class in your CSS. Change that to a fixed value (13px) and it will stay constantly aligned.

Change
.header {margin: 0px 1%;

to
.header {margin: 0px 13px;

The changing differential is due to your use of 1% in the header class in your CSS. Change that to a fixed value (13px) and it will stay constantly aligned.

Change
.header {margin: 0px 1%;

to
.header {margin: 0px 13px;