Why my boxes look different on the WP page than they did in jsFiddle

Hi. I’ve developing https://www.photo-genica.co.uk website and I’ve two pages with boxes on them https://www.photo-genica.co.uk/portfolio/ and https://www.photo-genica.co.uk/client-area/

They’re not finished hence the photos being the same etc. You will notice that the Client Area boxes have padding between the image and the box which is the same thickness at the top as it is at the sides. But the boxes in the Portfolio area are not right, with the image sort of shunted down and so the padding at the top is too thick. I cannot work out why.

When I test the code in jsFiddle it looks how I want it. But in WordPress it doesn’t.

===================
HTML FOR PORTFOLIO
===================

<h1>PORTFOLIO</h1>

<p>Some text introducing the Portfolio page and inviting the visitor to click on the boxes below to see a selection of photographs for the relevant categories</p>
<div class="pfboxwrapper">
    <div id="pfbox1"><a href="https://www.photo-genica.co.uk/newborn/">
        <div class="boximage">
            <img alt="" src="https://www.photo-genica.co.uk/wp/wp-content/uploads/2013/04/nurseries_thumb.jpg" /></a>

    </div>
     <h4><a href="https://www.photo-genica.co.uk/newborn/">Newborn</a></h4>

</div>
<div id="pfbox2"><a href="https://www.photo-genica.co.uk/family">
        <div class="boximage">
            <img alt="" src="https://www.photo-genica.co.uk/wp/wp-content/uploads/2013/04/nurseries_thumb.jpg" /></a>

</div>
 <h4><a href="https://www.photo-genica.co.uk/family/">Family</a></h4>

</div>
<div id="pfbox3"><a href="https://www.photo-genica.co.uk/nurseries">
        <div class="boximage">
            <img alt="" src="https://www.photo-genica.co.uk/wp/wp-content/uploads/2013/04/nurseries_thumb.jpg" /></a>

</div>
 <h4><a href="https://www.photo-genica.co.uk/nurseries/">Nurseries</a></h4>

</div>
</div>

======================
CSS FOR PORTFOLIO PAGE
======================

/* Porfolio Box Code */
 .pfboxwrapper {
    max-width:760px;
    margin: 0 auto;
    }
#pfbox1, #pfbox2, #pfbox3 {
    float: left;
    padding: 20px;
    margin: 30px;
    width: 150px;
    height: 200px;
    border: 1px solid #BABABA;
    background-color: #DBD5D5;
    text-align: center;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
}
/* Client & Portfolio Boxes Hover Fade */
 .boximage {
    opacity:1.0;
    filter:alpha(opacity=100);
    /* For IE8 and earlier */
}
.boximage:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    /* For IE8 and earlier */
}

========================
HTML FOR CLIENT AREA PAGE
========================

<h1>CLIENT AREA</h1>

<p>Existing clients can view and buy photographs. Click on the relevant link below to access your photoshoot.</p>
<br></br>
<div class="box_wrapper">
    <div class="leftbox">
        <div class="boximage"><a href="https://www.everybodysmile.biz/photogenica/portr"><img alt="" src="https://www.photo-genica.co.uk/wp/wp-content/uploads/2013/04/Portraits_thumb.jpg" /></a>
        </div>

<h4><a href="https://www.everybodysmile.biz/photogenica/portr">Portraits</a></h4>

    </div>
    <div class="rightbox">
        <div class="boximage"><a href="https://www.everybodysmile.biz/photogenica/nurse"><img alt="" src="https://www.photo-genica.co.uk/wp/wp-content/uploads/2013/04/nurseries_thumb.jpg" /></a>
        </div>

<h4><a href="https://www.everybodysmile.biz/photogenica/nurse">Nurseries</a></h4>

    </div>
</div>

========================
CSS FOR CLIENT AREA PAGE
========================

/*  Client Area Box Styling  */
 .box_wrapper {
    width: 500px;
    margin: 0 auto;
}
.leftbox, .rightbox {
    float: left;
    padding: 20px;
    width: 150px;
    height: 200px;
    border: 1px solid #BABABA;
    background-color: #DBD5D5;
    text-align: center;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
}
.rightbox {
    float: right;
    padding: 20px;
    width: 150px;
    height: 200px;
    border: 1px solid #BABABA;
    background-color: #DBD5D5;
    text-align: center;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
}