Проблема с позиционированием CSS в столбцах WordPress

Question

У меня проблема с размещением надписи на верхней части изображения. Картинки в столбце, есть 4 столбца. Первые 3 столбца, кажется, работают нормально, но когда дело доходит до последнего столбца, он выглядит не совсем правильно, и я чувствую, что это может иметь отношение к WordPress CSS? Я попытался добавить CSS к последнему столбцу, который позиционирует его правильно, но тогда ширина не правильно... Я так растерялся. Это может быть такое простое исправление, но я не могу понять это

Вот ссылка на сайт http://aminkhalil.com/

Вот мой HTML-код

[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]

Вот мой 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;
}

Любая помощь приветствуется. Заранее спасибо!!

Answer 1

Я понял!! У меня были некоторые дополнительные пробелы / разрывы в HTML, из-за которых первые 3 столбца отличались от предыдущих. Я добавил / изменил несколько вещей в span.caption и удалил CSS для.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 */
}

Спасибо всем, кто, возможно, сделал любое исследование!!