css - Polaroid Effect Acting Strange -

i'm new css , have been getting fine far going through tutorials , reading of great advice on site cant head around one. trying achieve polaroid effect using css , getting weird effects on website. have tested code on jsfiddle , works fine, copied entire sites css , still worked fine in jsfiddle. use code on website margins, padding, rotation etc. wrong.

please i'm @ loss here , don't know affecting it, idea reason css selectors using not selecting elements properly.

the site page is: http://kamhairandmakeup.co.uk/vintage/

the jsfiddle is:

<iframe width="100%" height="300" src="http://jsfiddle.net/deepwaterlizard/nxsuq/1/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>  

or

http://jsfiddle.net/deepwaterlizard/nxsuq/1/

i can post css , html here if needed didn't want take space, thank in advance.

i not entirely sure, starters, first image (black , white) has html on site:

<p>                     <!--the caption appears below image-->     <br> </p> 

after figcaption tag , not present in fiddle.

looks using wordpress. editor generate lot of <p> tags, e.g. each new line, generate <p>&nbsp;</p> or empty <p></p>