It's probably the text-align:center on the parent centering the block element in error.
background: url("/photos/2.jpg") no-repeat scroll 50% 0 transparent;
padding: 90px 0 0;
[B] text-align: center;[/B]
Change it to text-align:left;
In the future if I need to move around this gallery in this footer, should I just use or relative positioning and use top, left, etc,.?
Relative positioning doesn't move anything physically and is only used in special occasions where you want to maintain the flow of the page exactly as it is but make an element appear somewhere else. It however still takes part in the flow as if it were in its original position which can appear to cause holes on the page where the element should have been. Most times you would use margins instead.
Also I have question about
background:url(/photos/2.jpg) no-repeat 50% 0 transparent;
what does the transparent stands for?
Transparent is the default and doesn't need to be specified and basically means no background color for that element. i.e. it will be transparent and what ever else is beneath the div will shine through. This is the default and only needs to be specified if over-ruling something that went before.