issue with css positioning in wordpress columns - html

Question

I am having an issue with positioning a caption on top of a picture. The pictures are in a column, there are 4 columns. The first 3 columns seem to work fine but then when it comes to the last column, it does not look right at all and I feel like it may have to do with wordpress css? I have tried to add css to the last column which positions it correctly but then the width is not right... I am so confused. This may be such a simple fix but I can't seem to figure it out
Here is the link to the website
http://aminkhalil.com
Here is my html code
[fourcol_one]
<a href="#" class="caption">
<img class="hover" alt="Services" src="http://growinggood.com/wp-content/uploads/2014/02/billboard-slider-images.jpg" />
<span class="caption">Services</span></a>
[/fourcol_one]
[fourcol_one]
<a href="#" class="caption">
<img class="hover" alt="Keep Healthy" src="http://growinggood.com/wp-content/uploads/2014/02/billboard-slider-images.jpg" />
<span class="caption">Keep Healthy</span></a>
[/fourcol_one]
[fourcol_one]
<a href="#" class="caption">
<img class="hover" alt="Meet The Staff" src="http://growinggood.com/wp-content/uploads/2014/02/billboard-slider-images.jpg" />
<span class="caption">Meet The Staff</span></a>
[/fourcol_one]
[fourcol_one_last]
<a href="#" class="caption">
<img class="hover" alt="Portal" src="http://growinggood.com/wp-content/uploads/2014/02/billboard-slider-images.jpg" />
<span class="caption">Portal</span></a>
[/fourcol_one_last]
Here is my css
a.caption{
position:relative;
}
a:hover img.hover{
opacity: 0.5;
filter: alpha(opacity=530);
}
span.caption{
color: #fff !important;
position: absolute;
bottom: 0;
left: 2%;
padding: 1.9%;
width: 93%;
background-color: rgba(0,0,0,0.5);
}
.last span.caption{
bottom: 22px;
left: 3px;
}
Any help is appreciated. Thank you in advance!!

Answer 1

I figured it out!! I had some extra spaces/breaks in the HTML which was making the first 3 columns different than the last. I added/changed a couple of things to span.caption and deleted the CSS for .last span.caption
span.caption{
color: #fff !important;
position: absolute;
padding: 1.9%;
width: 93.5%;
background-color: rgba(0,0,0,0.5);
display: block; /* added */
bottom: 0; /* changed */
left: 3px; /* changed */
}
Thanks to anyone who may have done any research!!