I like to put a border around the element that I'm trying to fix and give it a color so I can see what happening. It's really hard to see movement of a white box inside a white box.
So you could go to ATO->Style & configure SIDEBARS->RIGHT sidebar style and add
HTML Code:
border: solid 1px #000000;
padding: 2px 2px 2px 2px;
background: #00ffff;
and then go to ATO->Style WIDGETS->Widget Container and add
HTML Code:
border: solid 1px #000000;
padding: 2px 2px 2px 2px
;
and you will get a good feel for the spacing of the widgets.
Once you do ou need to look at the generated source and look at the widget you want to effect. When I look at your page, I see
HTML Code:
<div id="ngg-images-486249871" class="widget ngg_images">
<div class="hslice" id="ngg-webslice" >
<h2 class="widgettitle entry-title">New Arrivals</h2>
<div class="ngg-widget entry-content">
<a href="<..snip..>/antique/t132-3d-bn.jpg" title="" rel="lightbox[sidebar_486249871]"><img src="<..snip..>/antique/thumbs/thumbs_t132-3d-bn.jpg" width="90" height="90" title="t132-3d-bn.jpg" alt="t132-3d-bn.jpg" /></a>
<a href="<..snip..>/kohler-valves/407-K.jpg" title="" rel="lightbox[sidebar_486249871]"><img src="<..snip..>/kohler-valves/thumbs/thumbs_407-K.jpg" width="90" height="90" title="407-K" alt="407-K" /></a>
<a href="<..snip..>/kohler-alterna-inserts/9926-PB-17.jpg" title="K-9926-PB-17" rel="lightbox[sidebar_486249871]"><img src="<..snip..>/kohler-alterna-inserts/thumbs/thumbs_9926-PB-17.jpg" width="90" height="90" title="9926-PB-17" alt="9926-PB-17" /></a>
<a href="<..snip..>/kohler-valves/679-ks-na.jpg" title="" rel="lightbox[sidebar_486249871]"><img src="<..snip..>/kohler-valves/thumbs/thumbs_679-ks-na.jpg" width="90" height="90" title="679-ks-na" alt="679-ks-na" /></a>
<a href="<..snip..>/kohler-revival/T16113-4A-CB-OLD.jpg" title="" rel="lightbox[sidebar_486249871]"><img src="<..snip..>/kohler-revival/thumbs/thumbs_T16113-4A-CB-OLD.jpg" width="90" height="90" title="T16113-4A-CB-OLD.jpg" alt="T16113-4A-CB-OLD.jpg" /></a>
<a href="<..snip..>/kingston-heritage/KS2981KX.jpg" title="" rel="lightbox[sidebar_486249871]"><img src="<..snip..>/kingston-heritage/thumbs/thumbs_KS2981KX.jpg" width="90" height="90" title="KS2981KX" alt="KS2981KX" /></a>
</div>
</div>
</div>
since you want to center the pictures, look at teh inner most <div> and you see a '<div class="ngg-widget entry-content">' so there is a class you can use for teh CSS Selector so you can add a CSS Insert of
HTML Code:
div.ngg-widget {
text-align: center;
}
and if you go look at the results, the pictures will now be aligned...but the title is not.
Looking at the code you see that the title is in an <h2> and it has a class="widgettitle" so you can use this to make the CSS Selector for the titles, but (there is always a but, isn't there.) it could effect other widget titles, so looking at the <div> that includes the <h2>we see another calss with 'class="hslice" so if you buil the CSS selector with both, the rules will only apply to h2's that have a class of 'widgettitle' and are inside a DIV with a class of 'hslice' so to center the title you would use
HTML Code:
div.hslice h2.widgettitle {
text-align: center;
}
Now it looks like the the 'Featured Videos' title is not centered, but you should have enough here to figure out how to center that too.