Relative positioning not working correctly CSS - html

Question

so I'm trying to position my content box and its working fine for left, but when I try change the right value it doesn't allow. As you can see I have four images, but I want to show three, so therefore I'm trying to increase the right value so the box can only fit three (and also bring it in to the center a bit more)
I can get it to work by changing it to padding-right instead of right, but I don't understand why that works? My understanding is that : Padding = Distance between the content and the border, and right = how far from the edge?
Image:
This is my content box code (the images are inside it in another box)
.imagesArea {
position:relative;
top:15px;
left:100px;
padding-right:180px;
}
Thanks
edit: html (removed some of the image code)
<div class="imagesArea">
<div class="images">
<figure>
<img src="photos/image1.jpg" alt=”Photo” width=150 height=150>
<figcaption>Watch #1</figcaption>
</figure>
</div>
<div class="images">
<figure>
<img src="photos/image2.jpg" alt=”Photo” width=150 height=150>
<figcaption>Watch #2</figcaption>
</figure>
</div>
<div class="images">
<figure>
<img src="photos/image3.jpg" alt="Photo" width="150" height="150">
<figcaption>watch #3</figcaption>
</figure>
</div>
</div>

Answer 1

Your understanding of relative positioning is completely wrong. It sounds like you are confusing it with margins.
With relative positioning, the element is sized and positioned according to normal flow (i.e. as if it was statically positioned), and then the whole box is offset according to left/right/etc. This can cause it to overlap with other elements.
See this example for a visual representation.
It won't adjust the size of the box at all, so it will have no influence over how much content it can hold.
If you want to control how wide the element is, use width, padding, border and/or margin.

Answer 2

You can use margin for inner content div images
.images{
display: inline-block;
margin:0 20px 0 20px;
}
and set parent div
.imagesArea {
position:relative;
top:15px;
left:100px;
padding-right:180px;
text_align:center;
}
As you want to show 3 images in a row, It will work for you.